Vue的mergeOptions函数分析-下-白红宇

上篇文章分析了mergeOptions函数的主要逻辑，最后知道是分别遍历俩个选项对象都去执行mergeField函数，其中mergeField函数其实是根据不同的key值来获取到相应的合并策略，从而执行真正的合并。接下来我们主要分析下Vue针对不同的内部选项实施的合并策略

defaultStrat

我们再看一下mergeField函数，当strats[key]不存在时，会采取defaultStrat作为合并策略。也就是说如果我们不向Vue.config.optionMergeStrategies添加额外的策略，那就会采取默认的合并策略。

function mergeField (key) {  const strat = strats[key] || defaultStrat  options[key] = strat(parent[key], child[key], vm, key)}复制代码

我们可以在当前文件中找到defaultStrat函数如下，默认合并策略超简单，就是当子选项childVal存在时，就会采用子选项。也就是覆盖式的合并。

const defaultStrat = function (parentVal: any, childVal: any): any {  return childVal === undefined    ? parentVal    : childVal}复制代码

我们可以通过Vue.util.mergeOptions()来看一看defaultStrat的合并效果，如下图，当我们父选项parentVal、子选项childVal上都存在name属性时，合并的对象会采用子选项上的值。但是当我们设置Vue.config.optionMergeStrategies.name后，mergeField函数就会采用我们设置好的合并策略，结果会将俩个值相加。

el和propsData

if (process.env.NODE_ENV !== 'production') {  strats.el = strats.propsData = function (parent, child, vm, key) {    // 没有传vm说明 不是实例化时候 调用的mergeOptions    if (!vm) {      warn(        `option "${key}" can only be used during instance ` +        'creation with the `new` keyword.'      )    }    // 采用默认的策略    return defaultStrat(parent, child)  }}复制代码

可以发现，el和propsData的合并就是采用了默认的合并策略(覆盖式)，但在非生产环境下，会多一步判断，判断如果没有传vm参数则给出警告，el、propsData参数只能用于实例化。那根据vm就可以判断出是否是实例化时候调用的嘛？这里是肯定的。我们提到过Vue.extend、Vue.mixin调用mergeOptions是不传入第三个参数的，mergeOptions调用mergeField函数又会把vm传入进去，所以说vm没有传就为undefined，就可以说明不是实例化时调用的。再说一点，用vm也可以判断出是否是处理子组件选项，因为子组件的实现方式是通过实例化子类完成的，而子类又是通过Vue.extend创造出来的。

data

strats.data = function ( parentVal: any, childVal: any, vm?: Component): ?Function {  if (!vm) {    if (childVal && typeof childVal !== 'function') {      process.env.NODE_ENV !== 'production' && 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)}复制代码

根据?Function可以知道data的合并会返回一个函数，这里也会先判断有没有传入vm，如果没有传入，会判断子选项data是否是函数，不是函数的话直接返回父选项data并且给出警告。这个警告应该在我们刚开始用Vue都有遇到过，这是为了防止对象引用造成修改会影响到其他组件的data。如果是函数，则调用mergeDataOrFn函数。那我们可以发现，不管传没传vm参数，都会调用mergeDataOrFn函数来返回一个函数。那接下来我们看一下mergeDataOrFn函数干了什么。

export function mergeDataOrFn ( parentVal: any, childVal: any, vm?: Component): ?Function {  // 没有vm参数，代表是用 Vue.extend、Vue.mixin合并，  if (!vm) {    // 如果没有childVal,返回parentVal     if (!childVal) {      return parentVal    }    // 如果没有parentVal,返回childVal    if (!parentVal) {      return childVal    }    // 返回一个合并data函数    return function mergedDataFn () {       // 当调用mergedDataFn才会执行mergeData      return mergeData(        typeof childVal === 'function' ? childVal.call(this, this) : childVal,        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal      )    }  } else {    // 返回一个合并data函数    return function mergedInstanceDataFn () {      // 实例化合并，判断是否是函数，函数执行得到对象。      const instanceData = typeof childVal === 'function'        ? childVal.call(vm, vm)        : childVal      const defaultData = typeof parentVal === 'function'        ? parentVal.call(vm, vm)        : parentVal      if (instanceData) {        // 如果子选项data有值，则通过mergeData合并。        // 当调用mergedInstanceDataFn才会执行mergeData        return mergeData(instanceData, defaultData)      } else {        // 子选项data没有值，直接返回默认data        return defaultData      }    }  }}复制代码

上面mergeDataOrFn函数分为俩种情况，一种是没有vm参数说明是处理子组件合并data选项的，另一种是有vm参数说明是实例化处理data的合并。

我们先看一下处理子组件的情况，首先判断没有childVal返回parentVal，没有parentVal返回childVal。如果俩个都有值，则返回mergedDataFn函数。下图分别展示了三种情况的合并效果。

通过Parent.mixin()触发合并，此时parentVal已经经过Vue.extend合并过。childVal没有data选项

通过Vue.extend()触发合并，此时parentVal是Vue.options没有data选项，childVal有data选项

parentVal、childVal都有值时，返回mergedDataFn函数

再看一下处理实例化时data合并的情况，处理实例化时data合并直接返回mergedInstanceDataFn函数。

我们可以发现，俩种情况都是返回函数，并且函数中都是先判断parentVal、childVal是否是函数，是函数的话直接执行函数获取纯对象，最后都通过mergeData来返回合并后的纯对象。所以说mergeData函数是真正用来合并选项对象的，那我们在来看一下这个函数。

// 将from的属性添加到to上，最后返回tofunction mergeData (to: Object, from: ?Object): Object {  // 如果没有from、直接返回to  if (!from) return to  let key, toVal, fromVal  // 取到from的key值，用于遍历  const keys = hasSymbol    ? Reflect.ownKeys(from)    : Object.keys(from)    for (let i = 0; i < keys.length; i++) {    key = keys[i]    // 对象被观察了，会有__ob__属性，__ob__不作处理    if (key === '__ob__') continue    toVal = to[key]    fromVal = from[key]    // 如果to上没有该属性，则直接将from对应的值赋值给to[key]    if (!hasOwn(to, key)) {      set(to, key, fromVal)    } else if (      toVal !== fromVal &&      isPlainObject(toVal) &&      isPlainObject(fromVal)    ) {      // 如果 to、from都有值，并且不相同，而且都是纯对象的话，      // 则递归调用mergeData进行合并      mergeData(toVal, fromVal)    }  }  return to}复制代码

mergeData函数很简单，就是将parentVal的data纯对象(from)所拥有的属性添加到childVal的data纯对象(to)，最后返回合并的纯对象。如果其中俩个纯对象上有相同的key值，则比较是否相等，如果相等什么都不用做，不相等的话，则递归合并。

Hook钩子函数

// 钩子函数当做数组合并来处理，最后返回数组function mergeHook (  parentVal: ?Array
    
     ,  childVal: ?Function | ?Array
     
      ): ?Array
      
        {  const res = childVal    ? parentVal  // childVal有值      ? parentVal.concat(childVal) // parentVal有值，与childVal直接数组拼接      : Array.isArray(childVal) // parentVal没有值，将childVal变成数组        ? childVal        : [childVal]    // childVal没有值直接返回parentVal    : parentVal  return res    ? dedupeHooks(res)    : res}// 去重操作function dedupeHooks (hooks) {  const res = []  for (let i = 0; i < hooks.length; i++) {    if (res.indexOf(hooks[i]) === -1) {      res.push(hooks[i])    }  }  return res}// src/shared/constants 文件夹定义const LIFECYCLE_HOOKS = [  'beforeCreate',  'created',  'beforeMount',  'mounted',  'beforeUpdate',  'updated',  'beforeDestroy',  'destroyed',  'activated',  'deactivated',  'errorCaptured',  'serverPrefetch']// 所有钩子函数采用一种合并策略LIFECYCLE_HOOKS.forEach(hook => {  strats[hook] = mergeHook})复制代码

生命周期的钩子选项合并也非常简单，就是把合并当做数组拼接。如果其中一个纯对象没有，则把另一方变成数组返回。这里有俩点需要提一下:

在判断childVal没有直接返回parentVal和当俩个对象都有的时候通过parentVal.concat()拼接，都直接把parentVal当做数组来处理。说明parentVal一定是数组，因为如果parentVal有值，那一定是被mergeOptions处理过一次啦，所以会变成数组。

上面有判断Array.isArray(childVal)，而不是直接变成数组。，说明childVal可以是个数组，如下图，我们可以给created传入数组也可以

component、directive、filter

function mergeAssets (  parentVal: ?Object,  childVal: ?Object,  vm?: Component,  key: string): Object {  // 创建一个空对象，通过res.__proto__可以访问到parentVal  const res = Object.create(parentVal || null)  // 如果childVal有值，则校验childVal[key]是否是对象，不是给出警告。  // extend函数是将childVal的属性添加到res上，  if (childVal) {    process.env.NODE_ENV !== 'production' && assertObjectType(key, childVal, vm)    return extend(res, childVal)  } else {    return res  }}// component、directive、filterASSET_TYPES.forEach(function (type) {  strats[type + 's'] = mergeAssets})复制代码

component、directive、filter选项的合并是先将parentVal添加到res.__proto__上，然后把childVal添加到res上。当我们使用组件时，Vue会一层一层的向上查找。这也就是为什么我们没有引入KeepAlive、Transition、TransitionGroup内置组件，却可以直接在template中使用，因为在合并时，就已经将内置组件合并到components对象的原型链上。如下图：

watch

strats.watch = function (  parentVal: ?Object,  childVal: ?Object,  vm?: Component,  key: string): ?Object {  // Firefox浏览器自带watch，如果是原生watch，则置空  if (parentVal === nativeWatch) parentVal = undefined  if (childVal === nativeWatch) childVal = undefined  // 如果没有childVal，则创建返回空对象，通过__proto__可以访问parentVal  if (!childVal) return Object.create(parentVal || null)  // 非正式环境检验校验childVal[key]是否是对象，不是给出警告。  if (process.env.NODE_ENV !== 'production') {    assertObjectType(key, childVal, vm)  }  // 如果没有parentVal，返回childVal  if (!parentVal) return childVal  // parentVal和childVal都有值的情况  const ret = {}  // 把parentVal属性添加到ret  extend(ret, parentVal)  // 遍历childVal  for (const key in childVal) {    let parent = ret[key]    const child = childVal[key]    // 如果parent存在，则变成数组    if (parent && !Array.isArray(parent)) {      parent = [parent]    }    // 返回数组    ret[key] = parent      ? parent.concat(child)      : Array.isArray(child) ? child : [child]  }  return ret}复制代码

watch的选项合并简单说就是判断父子是否都有监听同一个值，如果同时监听了，就变成一个数组。否则就正常合并到一个纯对象上就可以。watch也可以为一个值创建监听数组，例如：

export default {  watch: {    key: [      function() {        console.log('key 改变1')      },      function() {        console.log('key 改变2')      }    ]  }}复制代码

props、methods、inject、computed

strats.props =strats.methods =strats.inject =strats.computed = function (  parentVal: ?Object,  childVal: ?Object,  vm?: Component,  key: string): ?Object {  // 非正式环境检验校验childVal[key]是否是对象，不是给出警告。  if (childVal && process.env.NODE_ENV !== 'production') {    assertObjectType(key, childVal, vm)  }  // 如果没有parentVal 返回childVal  if (!parentVal) return childVal  const ret = Object.create(null)  // 将parentVal属性添加到ret  extend(ret, parentVal)  // 如果childVal有值，也将属性添加到ret  if (childVal) extend(ret, childVal)  return ret}复制代码

props、methods、inject、computed选项的合并是合并到同一个纯对象上，对于父子有同样的key值，采取子选型上对应的值。

provide

// provide选型合并采用data选项的合并策略strats.provide = mergeDataOrFn复制代码