12.3 内置组件

最后说说Vue思想中的另一个概念，内置组件，其实vue的官方文档有对内置组件进行了列举，分别是component, transition, transition-group, keep-alive, slot，其中<slot>我们在插槽这一节已经详细介绍过，而component的使用这一节也花了大量的篇幅从使用到原理进行了分析。然而学习了slot,component之后，我开始意识到slot和component并不是真正的内置组件。内置组件是已经在源码初始化阶段就全局注册好的组件。而<slot>和<component>并没有被当成一个组件去处理，因此也没有组件的生命周期。slot只会在render函数阶段转换成renderSlot函数进行处理，而component也只是借助is属性将createElement的第一个参数从字符串转换为变量，仅此而已。因此重新回到概念的理解，内置组件是源码自身提供的组件，所以这一部分内容的重点，会放在内置组件是什么时候注册的，编译时有哪些不同这两个问题上来。这一部分只是一个抛砖引玉，接下来会有文章专门详细介绍keep-alive，transition, transition-group的实现原理。

12.3.1 构造器定义组件

Vue初始化阶段会在构造器的components属性添加三个组件对象,每个组件对象的写法和我们在自定义组件过程的写法一致，有render函数，有生命周期，也会定义各种数据。

  1. // keep-alive组件选项
  2. var KeepAlive = {
  3.   render: function() {}
  4. }
  6. // transition 组件选项
  7. var Transition = {
  8.   render: function() {}
  9. }
  11. // transition-group 组件选项
  12. var TransitionGroup = {
  13.   render: function() {},
  14.   methods: {},
  15.   ···
  16. }
  18. var builtInComponents = {
  19.   KeepAlive: KeepAlive
  20. };
  22. var platformComponents = {
  23.   Transition: Transition,
  24.   TransitionGroup: TransitionGroup
  25. };
  27. // Vue构造器的选项配置，compoents选项合并
  28. extend(Vue.options.components, builtInComponents);
  29. extend(Vue.options.components, platformComponents);

extend方法我们在系列的开头，分析选项合并的时候有说过，将对象上的属性合并到源对象中，属性相同则覆盖。

  1. // 将_from对象合并到to对象，属性相同时，则覆盖to对象的属性
  2. function extend (to, _from) {
  3.   for (var key in _from) {
  4.     to[key] = _from[key];
  5.   }
  6.   return to
  7. }

最终Vue构造器拥有了三个组件的配置选项。

  1. Vue.components = {
  2.   keepAlive: {},
  3.   transition: {},
  4.   transition-group: {},
  5. }

12.3.2 注册内置组件

仅仅有定义是不够的。组件需要被全局使用还得进行全局的注册，这其实在选项合并章节已经阐述清楚了。Vue实例在初始化过程中，最重要的第一步是进行选项的合并，而像内置组件这些资源类选项会有专门的选项合并策略，最终构造器上的组件选项会以原型链的形式注册到实例的compoonents选项中(指令和过滤器同理)。

  1. // 资源选项
  2. var ASSET_TYPES = [
  3.   'component',
  4.   'directive',
  5.   'filter'
  6. ];
  8. // 定义资源合并的策略
  9. ASSET_TYPES.forEach(function (type) {
  10.   strats[type + 's'] = mergeAssets; // 定义默认策略
  11. });
  13. function mergeAssets (parentVal,childVal,vm,key) {
  14.     var res = Object.create(parentVal || null); // 以parentVal为原型创建一个空对象
  15.     if (childVal) {
  16.       assertObjectType(key, childVal, vm); // components,filters,directives选项必须为对象
  17.       return extend(res, childVal) // 子类选项赋值给空对象
  18.     } else {
  19.       return res
  20.     }
  21.   }

关键的两步一个是var res = Object.create(parentVal || null);，它会以parentVal为原型创建一个空对象，最后是通过extend将用户自定义的component选项复制到空对象中。选项合并之后，内置组件也因此在全局完成了注册。

  1. {
  2.   components: {
  3.     child1,
  4.     __proto__: {
  5.       keepAlive: {},
  6.       transition: {},
  7.       transitionGroup: {}
  8.     }
  9.   }
  10. }

最后我们看看内置组件对象中并没有template模板，而是render函数，除了减少了耗性能的模板解析过程，我认为重要的原因是内置组件并没有渲染的实体。最后的最后，让我们一起期待后续对keep-alive原理分析，敬请期待。

12.4 小结

这节我们详细的介绍了动态组件的原理，我们经常使用<component :is="">以达到不同组件切换的目的，实际上是由于is这个关键字让模板编译成render函数时，组件render的标签是变量，这样在渲染阶段，随着数据的不同会渲染不同的组件。动态组件还有一种用法是使用内联模板去访问子组件的数据，这又增加了一种子父组件通信的方法。但是官方并不建议我们这样做，因为内联模板会让作用域变得混乱。内联组件实现父子通信的原理是它让父组件的编译过程放到了子组件，这样顺利成章的父组件就可以访问到子组件的变量。文章的最后引出了内置组件，Vue中真正的内置组件只有keep-alive, transition, transition-group三种，他们本质上是在内部定义好组件选项，并进行全局注册。下一节，我们将进入keep-alive内置组件的深度分析。