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

﹏ヽ暗。殇╰゛Y 2023-01-21 02:19 12阅读 0赞

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

### 推荐阅读 ###

*  [Vue2.0 源码解读系列(二) - 打开 Vue 神秘礼盒之合并选项(1)][Vue2.0 _ - _ Vue _1]
 *  [Vue2.0 源码解读系列(二) - 打开 Vue 神秘礼盒之合并选项(2)][Vue2.0 _ - _ Vue _2]
 *  [Vue2.0 源码解读系列 - 来自 Vue 的神秘礼盒][Vue2.0 _ - _ Vue]

文章篇幅较长， 建议花整块时间阅读分析。 另外由于篇幅过长， 本文分三篇文章产出， 便于大家理解与阅读。

## 合并策略的定义 ##

接着上一篇标准化 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」,认真学前端，做个专业的技术人...

![aca92d51950b342a5b5d4e0624c04a0d.png][]

![4bfc8cb7b6efeb83c835886c3cd9b0c5.png][]

点个**在看**支持我吧

![6206b1daab9fc888df25af3cf5749ab1.gif][]

[Vue2.0 _ - _ Vue _1]: http://mp.weixin.qq.com/s?__biz=MzU4MTc2NTc5NQ%3D%3D&chksm=fd43d56aca345c7ca6c95cab07a726909741e6f4637f83f89d4bb887dc1b7356e496b79d756c&idx=1&mid=2247486118&scene=21&sn=ba36e6272f166a2b6397e3d8f4a4c496#wechat_redirect
[Vue2.0 _ - _ Vue _2]: http://mp.weixin.qq.com/s?__biz=MzU4MTc2NTc5NQ%3D%3D&chksm=fd43d4e7ca345df13fed511fb0abb8bfc9be16a85bbcf908c9b91f1395b066eb6f7cfdf38840&idx=1&mid=2247486251&scene=21&sn=d838cc09d03b79f96e233289141deaf4#wechat_redirect
[Vue2.0 _ - _ Vue]: http://mp.weixin.qq.com/s?__biz=MzU4MTc2NTc5NQ%3D%3D&chksm=fd43d704ca345e12d44c9313cd0c964728829a9ea8f59dd79fbed7f01b1515f7766dd5381243&idx=1&mid=2247485640&scene=21&sn=ba9a28ab3ffa79a6cb0acfc6e3f2c5f2#wechat_redirect
[aca92d51950b342a5b5d4e0624c04a0d.png]: /images/20221021/3451ae6876cd43b3beb89dd2668d177a.png
[4bfc8cb7b6efeb83c835886c3cd9b0c5.png]: /images/20221021/936a9170a648416b96beeeb6c9c630ab.png
[6206b1daab9fc888df25af3cf5749ab1.gif]: /images/20221021/06555d3f23b34ee4927b28bcbb933142.png