1.1 Vue构造器的默认选项

  1. var ASSET_TYPES = [
  2. 'component',
  3. 'directive',
  4. 'filter'
  5. ];
  6. Vue.options = Object.create(null); // 原型上创建了一个指向为空对象的options属性
  7. ASSET_TYPES.forEach(function (type) {
  8. Vue.options[type + 's'] = Object.create(null);
  9. });
  10. Vue.options._base = Vue;

Vue构造函数自身有四个默认配置选项,分别是component,directive, filter以及返回自身构造器的_base(这里先不展开对每个属性内容的介绍)。这四个属性挂载在构造函数的options属性上。

我们抓取_init方法合并选项的核心部分代码如下:

  1. function initMixin (Vue) {
  2. Vue.prototype._init = function (options) {
  3. var vm = this;
  4. // a uid
  5. // 记录实例化多少个vue对象
  6. vm._uid = uid$3++;
  7. // 选项合并,将合并后的选项赋值给实例的$options属性
  8. vm.$options = mergeOptions(
  9. resolveConstructorOptions(vm.constructor), // 返回Vue构造函数自身的配置项
  10. options || {},
  11. vm
  12. );
  13. };
  14. }

从代码中可以看到,选项合并的重点是将用户自身传递的options选项和Vue构造函数自身的选项配置合并,并将合并结果挂载到实例对象的$options属性上。