深入剖析Vue源码 - 选项合并(下)

上一节深入剖析Vue源码 - 选项合并(上)的末尾，我们介绍了Vue中处理合并选项的思路，概括起来主要有两点，一是当选项存在定义好的默认配置策略时，优先选择默认配置策略，并且根据不同的配置项来合并子父选项; 二是当传入选项不存在默认策略时，处理的原则是有子类配置选项则默认使用子类配置选项，没有则选择父类配置选项。vue中，大部分选项都有其自定义策略，因此本节分析的重点也放在了各种自定义配置策略中(内置资源选项，生命周期钩子选项，el, data, watch, props等)。

首先还是回顾一下选项合并的代码，strat这个对象包含了所以自定义的默认策略。

function mergeOptions ( parent, child, vm ) {
  ···
  var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }
  function mergeField (key) {
    var strat = strats[key] || defaultStrat; // 如果有自定义选项策略，则使用自定义选项策略，否则选择子类配置选项
    options[key] = strat(parent[key], child[key], vm, key);
  }

  return options
}

1.5 资源选项的自定义策略

在上一节中，我们知道Vue构造函数自身有options的配置选项,分别是components组件, directive指令, filter过滤器，在创建实例之前，程序会将内置组件和内置指令分别挂载到components和directive属性上。

var ASSET_TYPES = [
  'component',
  'directive',
  'filter'
];
ASSET_TYPES.forEach(function (type) {
  Vue.options[type + 's'] = Object.create(null); // Vue构造器拥有的默认资源选项配置
});
// Vue内置组件
var builtInComponents = {
  KeepAlive: KeepAlive
};
var platformComponents = {
  Transition: Transition,
  TransitionGroup: TransitionGroup
};
// Vue 内置指令，例如： v-model, v-show
var platformDirectives = {
  model: directive,
  show: show
};
// 将_from对象合并到to对象，属性相同时，则覆盖to对象的属性
function extend (to, _from) {
  for (var key in _from) {
    to[key] = _from[key];
  }
  return to
}
extend(Vue.options.components, builtInComponents); 
extend(Vue.options.components, platformComponents); // 扩展内置组件
extend(Vue.options.directives, platformDirectives);  // 扩展内置指令

构造函数的默认资源选项配置如下：

Vue.options = {
  components: {
    KeepAlive: {}
    Transition: {}
    TransitionGroup: {}
  },
  directives: {
    model: {inserted: ƒ, componentUpdated: ƒ}
    show: {bind: ƒ, update: ƒ, unbind: ƒ}
  },
  filters: {}
  _base
}

在实例化Vue，或者实例化子类时，这一类资源选项是如何合并的呢？

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

ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets; // 定义默认策略
});

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

1.6 生命周期钩子选项自定义策略

我们知道掌握vue的生命周期钩子是使用vue高效开发组件的重点，这是vue官方的生命周期图

image

从源码中我们也可以看到vue中有多达12个钩子，而在选项合并的时候，生命周期钩子选项是遵循的以下的规则合并的。

var LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
];
LIFECYCLE_HOOKS.forEach(function (hook) {
  strats[hook] = mergeHook; // 对生命周期钩子选项的合并都执行mergeHook策略
});

function mergeHook (parentVal,childVal) {
  var res = childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal; // 1.如果子类和父类都拥有钩子选项，则将子类选项和父类选项合并, 2如果父类不存在钩子选项，子类存在时，则以数组形式返回子类钩子选项， 3.当子类不存在钩子选项时，则以父类选项返回。
  return res
    ? dedupeHooks(res)
    : res
}
// 防止多个组件实例钩子选项相互影响
function dedupeHooks (hooks) {
  var res = [];
  for (var i = 0; i < hooks.length; i++) {
    if (res.indexOf(hooks[i]) === -1) {
      res.push(hooks[i]);
    }
  }
  return res
}

简单总结，对于生命周期钩子选项，子类和父类的选项将合并成数组，这样每次执行子类的钩子函数时，父类钩子选项也会执行。

1.7 其他自定义策略

Vue自定义选项策略还有很多，我们继续列举其他几个例子。

1.7.1 el合并

我们只在创建vue的实例时才会执行节点挂载，在子类或者子组件中无法定义el选项，代码实现如下

strats.el = function (parent, child, vm, key) {
  if (!vm) {  // 只允许vue实例才拥有el属性，其他子类构造器不允许有el属性
    warn(
      "option \"" + key + "\" can only be used during instance " +
      'creation with the `new` keyword.'
    );
  }
  return defaultStrat(parent, child)
};

// 用户自定义选项策略
var defaultStrat = function (parentVal, childVal) {
  return childVal === undefined
    ? parentVal
    : childVal
};

1.7.2 data合并

另一个合并的重点是data的合并策略，data在vue创建实例时传递的是一个对象，而在组件内部定义时只能传递一个函数，

strats.data = function (parentVal, childVal, vm) {
  if (!vm) {
    if (!vm) {// 判断是否为Vue创建的实例，否则为子父类的关系
      if (childVal && typeof childVal !== 'function') { // 必须保证子类的data类型是一个函数而不是一个对象
        warn('The "data" option should be a function ' + 'that returns a per-instance value in component ' + 'definitions.',vm);
        return parentVal
      }
      return mergeDataOrFn(parentVal, childVal)
    }
  return mergeDataOrFn(parentVal, childVal, vm); // vue实例时需要传递vm作为函数的第三个参数
};

做了data选项的检验后，重点关注mergeDataOrFn函数的内部逻辑，代码中依然通过vm来区分是否为子类构造器的data合并。

function mergeDataOrFn ( parentVal, childVal, vm ) {
  if (!vm) {
    if (!childVal) { // 子类不存在data选项，则合并结果为父类data选项
      return parentVal
    }
    if (!parentVal) { // 父类不存在data选项，则合并结果为子类data选项
      return childVal
    }
    return function mergedDataFn () { // data选项在父类和子类同时存在的情况下返回的是一个函数
      // 子类实例和父类实例，分别将子类和父类实例中data函数执行后返回的对象传递给mergeData函数做数据合并
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    // vue构造函数实例对象
    return function mergedInstanceDataFn () {
      var instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal;
      var defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal;
      if (instanceData) {
        // 当实例中传递data选项时，将实例的data对象和Vm构造函数上的data属性选项合并
        return mergeData(instanceData, defaultData)
      } else {
        // 当实例中不传递data时，默认返回Vm构造函数上的data属性选项
        return defaultData
      }
    }
  }
}

如何实现数据合并,数据合并时，vue会将数据变化加入响应式系统中，我们先跳过响应式系统的构建部分，只关注单纯的数据合并。数据合并的原则是，将父类的数据整合到子类的数据选项中， 如若父类数据和子类数据冲突时，保留子类数据。

function mergeData (to, from) {
  if (!from) { return to }
  var key, toVal, fromVal;

  var keys = hasSymbol
    ? Reflect.ownKeys(from)
    : Object.keys(from);

  for (var i = 0; i < keys.length; i++) {
    key = keys[i];
    toVal = to[key];
    fromVal = from[key];
    if (!hasOwn(to, key)) {
      set(to, key, fromVal); // 当子类数据选项不存在父类的选项时，将父类数据合并到子类数据中，并加入响应式系统中。
    } else if ( //  处理深层对象，当合并的数据为多层嵌套对象时，需要递归调用mergeData进行比较合并
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      mergeData(toVal, fromVal);
    }
  }
  return to
}

思考一个问题，为什么Vue组件的data是一个函数，而不是一个对象呢？
我觉得这样可以方便理解：组件的目的是为了复用，每次通过函数创建相当于在一个独立的内存空间中生成一个data的副本，这样每个组件之间的数据不会互相影响。

1.7.3 watch 选项合并

对于 watch 选项的合并处理，类似于生命周期钩子，只要父选项有相同的观测字段，则合并为数组，在选项改变时同时执行父类选项的监听代码。处理方式和生命钩子选项的区别在于，生命钩子选项必须是函数或者数据，而watch选项则为对象。

strats.watch = function (parentVal,childVal,vm,key) {
    if (parentVal === nativeWatch) { parentVal = undefined; }
    if (childVal === nativeWatch) { childVal = undefined; }
    if (!childVal) { return Object.create(parentVal || null) }
    {
      assertObjectType(key, childVal, vm);
    }
    if (!parentVal) { return childVal }
    var ret = {};
    extend(ret, parentVal);
    for (var key$1 in childVal) {
      var parent = ret[key$1];
      var child = childVal[key$1];
      if (parent && !Array.isArray(parent)) {
        parent = [parent];
      }
      ret[key$1] = parent
        ? parent.concat(child)
        : Array.isArray(child) ? child : [child];
    }
    return ret
  };

1.7.4 props,methods, inject, computed 合并

// 其他选项合并策略
strats.props =
strats.methods =
strats.inject =
strats.computed = function (parentVal,childVal,vm,key) {
  if (childVal && "development" !== 'production') {
    assertObjectType(key, childVal, vm);
  }
  if (!parentVal) { return childVal } // 父类不存在该选项，则返回子类的选项
  var ret = Object.create(null);
  extend(ret, parentVal); // 
  if (childVal) { extend(ret, childVal); } // 子类选项会覆盖父类选项的值
  return ret
};

至此，vue初始化选项合并逻辑分析完毕。

喜欢本系列的朋友欢迎关注公众号 ‘ 假前端’，第一时间推送源码分析和每日算法