Vue 合并策略 optionMergeStrategies 看这里就够了-技术圈

鄢栋，微医前端技术部前端工程师。有志成为一名全栈开发工程师甚至架构师，路漫漫，吾求索。生活中通过健身释放压力，思考问题。

合并策略的定义

接着上一篇标准化 props, inject, directives, 以及传入选项的 extends, mixins 属性的合并，本篇来讲解 mergeOptions 函数的核心部分：合并策略的定义。

我们看 mergeOptions 函数的最后一部分源码：


const options = {}

  let key

  for (key in parent) {

    mergeField(key)

  }

  for (key in child) {

    if (!hasOwn(parent, key)) {

      mergeField(key)

    }

  }

  function mergeField (key) {

    const strat = strats[key] || defaultStrat

    options[key] = strat(parent[key], child[key], vm, key)

  }

可以看到，分别遍历 parent 和 child 对象，对每一个 key 值都调用了mergeField()函数

mergeField()函数是最终的合并策略函数。里面调用了strat()函数，而 strat 函数来自strats[key]和defaultStrat

先看一下`defaultStrat`


/**

* Default strategy.

*/

const defaultStrat = function (parentVal: any, childVal: any): any {

  return childVal === undefined

    ? parentVal

    : childVal

}

所以defaultStrat的逻辑是，如果 child 上该属性值存在时，就取 child 上的该属性值，如果不存在，则取 parent 上的该属性值。优先取 child 上的选项配置。

再看`strats[key]`

strats 是一个函数


const strats = config.optionMergeStrategies

export type Config = {

  // user

  optionMergeStrategies: { [key: string]: Function };

  ...

};

可以在 starts（ config.optionMergeStrategies）上定义不同函数类型的 key，然后定义这些 key 对应的合并策略。

config.optionMergeStrategies.el, config.optionMergeStrategies.propsData

if (process.env.NODE_ENV !== 'production') {
  strats.el = strats.propsData = function (parent, child, vm, key) {
    if (!vm) {
      warn(
        `option "${key}" can only be used during instance ` +
        'creation with the `new` keyword.'
      )
    }
    return defaultStrat(parent, child)
  }
}

从上述代码中可以看到， el 以及 propsData 的合并策略是默认的合并策略，如果子组件的选项存在，就取子组件的，否则取父组件的。

config.optionMergeStrategies.data、config.optionMergeStrategies.provide

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

strats.provide = mergeDataOrFn

可以看到， data 以及 provide 合并策略调用了mergeDataOrFn函数; 以下分析 data 选项的合并策略， provide 同理。

如果不是当前实例，即通过 Vue.extend()创建的实例

如果 childVal 不是函数，则返回 parentVal 作为当前 data 合并后的结果
否则调用mergeDataOrFn(parentVal, childVal), 这个时候未传入 vm 实例

如果是当前实例，即通过 new Vue()创建的实例

调用mergeDataOrFn(parentVal, childVal, vm), 这个时候传入了 vm 实例

找到 mergeDataFn 函数块

/**
 * Data
 */
export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // we need to return a function that returns the
    // merged result of both functions... no need to
    // check if parentVal is a function here because
    // it has to be a function to pass previous merges.
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

小结

根据上面的分析很快我们就能找到：

如果没有传入 vm 当前实例，也就是通过 Vue.extend()/Vue.component 创建的实例的时候

若没有 childVal, 有 parentVal, 则返回 parentVal
若没有 parentVal, 有 childVal, 则返回 childVal
若 childVal，parentVal 两者都有 data 选项, 则调用mergeData()函数合并 data 选项

如果传入了 vm 实例，也就是通过 new Vue()这种形式创建的实例

如果新建实例时传入了 data 选项，则调用mergeData函数合并实例和构造函数上的 data 选项
如果新建实例时没有传入 data 选项，则返回构造函数上的 data 选项

不管是哪种方式创建的实例，最终都调用了mergeData函数进行合并 data 选项。我们看一下mergeData函数

/**
 * Helper that recursively merges two data objects together.
 */
function mergeData (to: Object, from: ?Object): Object {
  if (!from) return to
  let key, toVal, fromVal

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

  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    // in case the object is already observed...
    if (key === '__ob__') continue
    toVal = to[key]
    fromVal = from[key]
    if (!hasOwn(to, key)) {
      set(to, key, fromVal)
    } else if (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      mergeData(toVal, fromVal)
    }
  }
  return to
}

如果构造器（from）上没有 data 选项，返回实例（to）上的 data 选项
如果构造器上也有 data 选项

先返回构造器 from 的 data 上所有的 key 值（keys）
遍历构造器 data 的 keys
如果实例 to 的 data 选项上没有构造器 data 选项上的 key 值，则调用 set 方法将该(key, fromVal)键值对挂到实例对象 to 的 data 选项里
否则，如果 to 的 data 选项与构造器上的 data 选项有相同的 key 值，并且该 key 对应的值是对象，则递归调用 mergeData 函数
最后返回实例 to 上的 data 选项

钩子函数合并的策略

export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]

/**
 * Hooks and props are merged as arrays.
 */
function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  const res = childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : 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
}

LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})

我们看到，每一个钩子合并都是调用了 mergeHook 函数，mergeHook 的逻辑

获取钩子数组 res

如果 child options 上不存在这个钩子，parent 存在，就返回 parent 上的钩子
如果 child, parent 上都存在相同的钩子，则返回 concat 之后的属性
child options 上存在， parent 上不存在，则判断 child 上的该属性是数组，则直接返回 child 上该属性

如果 res 不存在，返回 res
否则返回 dedupeHooks(res)，去重后的 hooks

Assets（components, directives, filters）的合并策略

/**
 * Assets
 *
 * When a vm is present (instance creation), we need to do
 * a three-way merge between constructor options, instance
 * options and parent options.
 */
function mergeAssets (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): Object {
  const res = Object.create(parentVal || null)
  if (childVal) {
    process.env.NODE_ENV !== 'production' && assertObjectType(key, childVal, vm)
    return extend(res, childVal)
  } else {
    return res
  }
}

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})

处理逻辑：如果 child 上存在这些选项，则与构造器 parent 上的选项合并，否则直接返回构造器上的这些 types 选项

props/methods/inject/computed 的合并策略

/**
 * Other object hashes.
 */
strats.props =
strats.methods =
strats.inject =
strats.computed = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  if (childVal && process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  if (!parentVal) return childVal
  const ret = Object.create(null)
  extend(ret, parentVal)
  if (childVal) extend(ret, childVal)
  return ret
}

这个合并方法的逻辑也很简单：

如果构造器上没有该选项，直接返回实例上的选项
如果构造器上有，实例上也有，返回合并后的结果

watch 的合并策略

/**
 * Watchers.
 *
 * Watchers hashes should not overwrite one
 * another, so we merge them as arrays.
 */
strats.watch = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  // work around Firefox's Object.prototype.watch...
  if (parentVal === nativeWatch) parentVal = undefined
  if (childVal === nativeWatch) childVal = undefined
  /* istanbul ignore if */
  if (!childVal) return Object.create(parentVal || null)
  if (process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  if (!parentVal) return childVal
  const ret = {}
  extend(ret, parentVal)
  for (const key in childVal) {
    let parent = ret[key]
    const child = childVal[key]
    if (parent && !Array.isArray(parent)) {
      parent = [parent]
    }
    ret[key] = parent
      ? parent.concat(child)
      : Array.isArray(child) ? child : [child]
  }
  return ret
}

逻辑处理同样也是三种：

如果实例上没有 watch 选项，返回构造器 parent 上的 watch 选项或者 null
否则如果实例上有，构造器上没有，就返回实例上的 watch 选项
否则两者都有的时候，遍历实例上 watch 对象

如果 parent 上该 key 对应的值不是数组，则返回[parent]
合并 parent 和 child 的 watch 选项
如果 parent 上存在与 child 中 watch 的 key
如果 parent 上不存在与 child 中 watch 的 key 返回数组形式的 child

写在最后

终于熬完了合并选项的分析（三篇文章），每天抽出睡觉的时间来啃这块，非常不容易，促进自己成长，希望也能给小可爱们带去一些启发，如果有地方觉得说的不清楚的欢迎在下方评论区提问，讨论~

看到这里的小可爱们，可顺手点个赞鼓励我继续创作，创作不易，一起学习，早日实现财富自由~

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧

Vue 合并策略 optionMergeStrategies 看这里就够了

推荐阅读