Vue源码分析(3)--选项合并过程mergeOptions

前言

本文是vue2.x源码分析的第三篇，主要讲解选项合并过程mergeOptions！

先看调用形式

vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
);

1、执行resolveConstructorOptions(vm.constructor)

function resolveConstructorOptions (Ctor) {
  var options = Ctor.options; //Ctor即Vue$3，Vue$3.options是在第一节中通过extend函数赋值的
  if (Ctor.super) {  //这里由于没有super属性，故直接返回了options
    var superOptions = resolveConstructorOptions(Ctor.super);
    var cachedSuperOptions = Ctor.superOptions;
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions;
      // check if there are any late-modified/attached options (#4976)
      var modifiedOptions = resolveModifiedOptions(Ctor);
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions);
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
      if (options.name) {
        options.components[options.name] = Ctor;
      }
    }
  }
  return options
}

返回的options长这个样子：

options = {
    components: {
        KeepAlive,
        Transition,
        TransitionGroup
    },
    directives: {
        model,
        show
    },
    filters: {},
    _base: Vue
}

2、执行mergeOptions (parent,child,vm)

parent即上述返回的options，child即new Vue(options)传入的options

function mergeOptions (parent,child,vm) {
  {
    //检查传入的components选项的名字是否符合规定（非内置标签）
    checkComponents(child);
  }
  //将传入的child.props转换为驼峰式结构的对象表达形式.props能使用数组和对象语法，
但在内部都会重新遍历封装到一个新对象中。
  normalizeProps(child);
  //directives使用对象语法，对象中属性的值只能为函数，该操作会将函数绑定到指令的bind和update函数上
  normalizeDirectives(child);
  //若存在extends，则将其内容合并到父对象parent中保存，最后再和自身child合并，extends最好是对象语法
  var extendsFrom = child.extends; //暂不清楚作用，记为Unknown3.1
  if (extendsFrom) {
    parent = typeof extendsFrom === 'function'
      ? mergeOptions(parent, extendsFrom.options, vm)
      : mergeOptions(parent, extendsFrom, vm);
  }
  //若存在mixins，则将其内容合并到父对象parent中保存，最后再和自身child合并，mixins只能是数组语法，数组中元素可以是对象
  if (child.mixins) {
    for (var i = 0, l = child.mixins.length; i < l; i++) {
      var mixin = child.mixins[i];
      if (mixin.prototype instanceof Vue$3) {
        mixin = mixin.options;
      }
      parent = mergeOptions(parent, mixin, vm);
    }
  }
  //初始化一个对象，用于存储parent和child合并后的内容，并作为mergeOptions函数的结果返回
  var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }
  //使用策略对象对parent和child进行合并
  function mergeField (key) {
    var strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key], vm, key);
  }
  return options
}

2.1、分析checkComponents(child)

function checkComponents (options) {
  for (var key in options.components) {//对象遍历形式，故components选项只能用对象，不用数组
    var lower = key.toLowerCase();
    //组件名字不能是内置标签(slot,component)和保留标签(html标签和svg标签)，用了闭包实现
    if (isBuiltInTag(lower) || config.isReservedTag(lower)) {
      warn(
        'Do not use built-in or reserved HTML elements as component ' +
        'id: ' + key
      );
    }
  }
}

2.2、分析normalizeProps(child);

function normalizeProps (options) {
  var props = options.props;
  if (!props) { return }
  var res = {};
  var i, val, name;
  if (Array.isArray(props)) { //props是数组
    i = props.length;
    while (i--) {
      val = props[i];
      if (typeof val === 'string') {
        name = camelize(val);//若val是*-i*的形式，则将其转为*I*,如v-header会被转为vHeader并被缓存
        res[name] = { type: null }; //每个val的值设为含有type属性的对象
      } else {
        warn('props must be strings when using array syntax.');
      }
    }
  } else if (isPlainObject(props)) {//props是对象
    for (var key in props) {
      val = props[key];
      name = camelize(key);
      res[name] = isPlainObject(val)//若用对象语法，则每个key的value对象最好包含type属性
        ? val
        : { type: val };
    }
  }
  options.props = res;
}

// 调用前：options.props=['header-value'];
// 调用后：options.props={
//           'headerValue':{type:null}
//         }

2.3、分析normalizeDirectives(child)

function normalizeDirectives (options) {
  var dirs = options.directives;
  if (dirs) {
    for (var key in dirs) { //数组也可以用for in遍历，故directives选项能用对象和数组语法，当只关心数组的value而不关心key时可以用for in遍历
      var def = dirs[key];
      if (typeof def === 'function') {
        dirs[key] = { bind: def, update: def };
      }
    }
  }
}
// 调用前：options.directives={
//            v-focus:function some(){}
//         };
// 调用后：options.directives={
//           'v-focus':{
//               bind:some,
//               update:some
//           }
//         }

2.4、分析extends和mixins

  二者作用都是进一步丰富parent选项，其本身是调用mergeOptions，这里不做分析，注意mixins只能用数组语法

2.5、分析合并策略对象strats

• 10个生命周期函数--mixins中同名属性用数组保存，mixins中的优先级高，先调用,
  合并后类似这样：

  beforeCreate:[mixins中的beforeCreate，child中的beforeCreate]
  

• 3个assets（directives、components、filters）--继承策略，以parent中同名属性的值为原型对象，以child中同名属性的值做实例属性，指令合并后类似这样:

  directives:{'v-focus':obj1,__proto__:{model:obj2,show:obj3}}
  

• el与propsData、也是用defaultStrat函数，只是会先判断vm实例是否存在

• data 返回一个函数mergedInstanceDataFn

• watch 同生命周期函数的合并策略

• props与methods与computed 覆盖策略，mixins中的同名属性会被child覆盖
  props合并后类似这样：

  props:[child中的属性]
  

• 其余选项的合并策略采用defaultStrat函数

3、小结

• 下一步分析内容
  ☐ 主要执行过程-2（实例的初始化过程）
  ☐ 主要执行过程-3（依赖收集、组件挂载等过程）
• 遗留问题解决情况
  ☐ Unknown3.1