1.6 常规选项的合并

1.6.1 el的合并

el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,因此它只在创建Vue实例才存在，在子类或者子组件中无法定义el选项，因此el的合并策略是在保证选项只存在于根的Vue实例的情形下使用默认策略进行合并。

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

1.6.2 data合并

常规选项的重点部分是在于data的合并，读完这部分源码，可能可以解开你心中的一个疑惑，为什么data在vue创建实例时传递的是一个对象，而在组件内部定义时只能传递一个函数。

// data的合并
strats.data = function (parentVal, childVal, vm) {
  // vm代表是否为Vue创建的实例，否则是子父类的关系
  if (!vm) {
    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实例
    // 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
      }
    }
  }
}

从源码的实现看，data的合并不是简单的将两个数据对象进行合并，而是直接返回一个mergedDataFn或者mergedInstanceDataFn函数，而真正合并的时机是在后续初始化数据响应式系统的环节进行的，初始化数据响应式系统的第一步就是拿到合并后的数据，也就是执行mergeData逻辑。(关于响应式系统的构建请移步后面的章节)

function mergeData (to, from) {
  if (!from) { return to }
  var key, toVal, fromVal;
  // Reflect.ownKeys可以拿到Symbol属性
  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 (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      // 处理深层对象，当合并的数据为多层嵌套对象时，需要递归调用mergeData进行比较合并
      mergeData(toVal, fromVal);
    }
  }
  return to
}

mergeData方法的两个参数是父data选项和子data选项的结果，也就是两个data对象，从源码上看数据合并的原则是，将父类的数据整合到子类的数据选项中， 如若父类数据和子类数据冲突时，保留子类数据。如果对象有深层嵌套，则需要递归调用mergeData进行数据合并。

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