1.7 自带资源选项合并

在1.2中我们看到了Vue默认会带几个选项，分别是components组件, directive指令, filter过滤器,所有无论是根实例，还是父子实例，都需要和系统自带的资源选项进行合并。它的定义如下：

  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. });

这些资源选项的合并逻辑很简单，首先会创建一个原型指向父类资源选项的空对象，再将子类选项赋值给空对象。

  1. // 资源选项自定义合并策略
  2. function mergeAssets (parentVal,childVal,vm,key) {
  3.   var res = Object.create(parentVal || null); // 创建一个空对象，其原型指向父类的资源选项。
  4.   if (childVal) {
  5.     assertObjectType(key, childVal, vm); // components,filters,directives选项必须为对象
  6.     return extend(res, childVal) // 子类选项赋值给空对象
  7.   } else {
  8.     return res
  9.   }
  10. }

结合下面的例子，我们看具体合并后的结果：

  1. var vm = new Vue({
  2.   components: {
  3.     componentA: {}
  4.   },
  5.   directives: {
  6.     'v-boom': {}
  7.   }
  8. })
  10. console.log(vm.$options.components)
  11. // 根实例的选项和资源默认选项合并后的结果
  12. {
  13.   components: {
  14.     componentA: {},
  15.     __proto__: {
  16.       KeepAlive: {}
  17.       Transition: {}
  18.       TransitionGroup: {}
  19.     } 
  20.   },
  21.   directives: {
  22.     'v-boom': {},
  23.     __proto__: {
  24.       'v-show': {},
  25.       'v-model': {}
  26.     }
  27.   }
  28. }

简单总结一下，对于 directives、filters 以及 components 等资源选项，父类选项将以原型链的形式被处理。子类必须通过原型链才能查找并使用内置组件和内置指令。