• 1.6 常规选项的合并
    • 1.6.1 el的合并
    • 1.6.2 data合并

    1.6 常规选项的合并

    1.6.1 el的合并

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

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

    1.6.2 data合并

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

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

    data策略最终调用的mergeDataOrFn方法，区别在于当前vm是否是实例，或者是单纯的子父类的关系。如果是子父类的关系，需要对data选项进行规范校验，保证它的类型是一个函数而不是对象。

    1. function mergeDataOrFn ( parentVal, childVal, vm ) {
    2.   // 子父类
    3.   if (!vm) {
    4.     if (!childVal) { // 子类不存在data选项，则合并结果为父类data选项
    5.       return parentVal
    6.     }
    7.     if (!parentVal) { // 父类不存在data选项，则合并结果为子类data选项
    8.       return childVal
    9.     }
    10.     return function mergedDataFn () { // data选项在父类和子类同时存在的情况下返回的是一个函数
    11.       // 子类实例和父类实例，分别将子类和父类实例中data函数执行后返回的对象传递给mergeData函数做数据合并
    12.       return mergeData(
    13.         typeof childVal === 'function' ? childVal.call(this, this) : childVal,
    14.         typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
    15.       )
    16.     }
    17.   } else {
    18.   // Vue实例
    19.     // vue构造函数实例对象
    20.     return function mergedInstanceDataFn () {
    21.       var instanceData = typeof childVal === 'function'
    22.         ? childVal.call(vm, vm)
    23.         : childVal;
    24.       var defaultData = typeof parentVal === 'function'
    25.         ? parentVal.call(vm, vm)
    26.         : parentVal;
    27.       if (instanceData) {
    28.         // 当实例中传递data选项时，将实例的data对象和Vm构造函数上的data属性选项合并
    29.         return mergeData(instanceData, defaultData)
    30.       } else {
    31.         // 当实例中不传递data时，默认返回Vm构造函数上的data属性选项
    32.         return defaultData
    33.       }
    34.     }
    35.   }
    36. }

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

    1. function mergeData (to, from) {
    2.   if (!from) { return to }
    3.   var key, toVal, fromVal;
    4.   // Reflect.ownKeys可以拿到Symbol属性
    5.   var keys = hasSymbol
    6.     ? Reflect.ownKeys(from)
    7.     : Object.keys(from);
    9.   for (var i = 0; i < keys.length; i++) {
    10.     key = keys[i];
    11.     toVal = to[key];
    12.     fromVal = from[key];
    13.     if (!hasOwn(to, key)) {
    14.       // 子的数据父没有，则将新增的数据加入响应式系统中。
    15.       set(to, key, fromVal); 
    16.     } else if (
    17.       toVal !== fromVal &&
    18.       isPlainObject(toVal) &&
    19.       isPlainObject(fromVal)
    20.     ) {
    21.       // 处理深层对象，当合并的数据为多层嵌套对象时，需要递归调用mergeData进行比较合并
    22.       mergeData(toVal, fromVal);
    23.     }
    24.   }
    25.   return to
    26. }

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

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