转载请注明出处

差不多看了快三周的 Vue 源码，决定写一些东西，记录一下收获，毕竟时间一长，好久不看总会忘的，今天就看看 optionMergeStrategies。写这篇文章时，Vue 已经发布了2.0.1正式版，但这里讲解的源码是 2.0.0-rc6 ,但基本没什么区别。

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略。

defaultStrat

这里先看看默认的合并策略，毕竟之后要用到很多次的。

var defaultStrat = function (parentVal, childVal) {  return childVal === undefined    ? parentVal    : childVal}

源代码很简单，传入两个参数 parentVal, childVal 分别对应于父组件和子组件的选项，合并的策略就是，子组件的选项不存在，才会使用父组件的选项，如果子组件的选项存在，使用子组件自身的。

options.el options.propsData

/** * Option overwriting strategies are functions that handle * how to merge a parent option value and a child option  * value into the final value. *  * config.optionMergeStrategies: Object.create(null) */  // config 是一个全局对象，对应于Vue.config // config.optionMergeStrategies 初始化时是一个空对象 // config.optionMergeStrategies = Object.create(null)var strats = config.optionMergeStrategies /** * Options with restrictions */if ("development" !== 'production') {  strats.el = strats.propsData = function (parent, child, vm, key) {      // 如果 vm 不存在，报错： key属性用在vm实例上    if (!vm) {      warn(        "option \"" + key + "\" can only be used during instance " +        'creation with the `new` keyword.'      )    }    return defaultStrat(parent, child)  }  strats.name = function (parent, child, vm) {    if (vm && child) {      warn(        'options "name" can only be used as a component definition option, ' +        'not during instance creation.'      )    }    return defaultStrat(parent, child)  }}

上面可以看出，el , propsData 和 name 的合并策略就是默认的合并策略，即以子组件的选项为主，子组件的选项不存在时，才使用父组件的。

options.hook

function mergeHook (  parentVal,  childVal ) {  return childVal    ? parentVal // 如果 childVal存在      ? parentVal.concat(childVal) // 如果parentVal存在，直接合并      : Array.isArray(childVal) // 如果parentVal不存在        ? childVal  // 如果chilidVal是数组，直接返回        : [childVal] // 包装成一个数组返回    : parentVal  // 如果childVal 不存在 直接返回parentVal }// strats中添加属性，属性名为生命周期各个钩子config._lifecycleHooks.forEach(function (hook) {  strats[hook] = mergeHook // 设置每一个钩子函数的合并策略})

如果父组件和子组件都设置了钩子函数选项，那么 它们会合并到一个数组里，而且父组件的钩子函数会先执行，最后返回一个合并后的数组。具体见源码里的注释。

options.components options.directives options.filters

/** * Assets // components,directives,filters * 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, childVal) { // parentVal: Object childVal: Object  var res = Object.create(parentVal || null) // 原型委托  return childVal    ? extend(res, childVal)    : res}config._assetTypes.forEach(function (type) {  strats[type + 's'] = mergeAssets})

对于 assets 也就是 components, directives, filters 合并的策略就是返回一个合并后的新对象，新对象的自有属性全部来自 childVal, 但是通过原型链委托在了 parentVal 上。

这里顺便提提在一个对象里查找属性的规则。举个例子，当查找一个属性时，如 obj[a] ,如果 obj 没有 a 这个属性，那么将会在 obj 对象的原型里找，如果还没有，在原型的原型上找，直到原型链的尽头，如果还没有找到，返回 undefined。

因此这里同样一个道理，在 res 对象里查找某个 component 或 directive , 首先会找 childVal里的，如果没有，才会沿着原型链向上，找 parentVal中对应的属性。事实上，和 defaultStrat 一个道理。

options.props options.methods options.computed

strats.props =strats.methods =strats.computed = function (parentVal, childVal) { // parentVal: Object childVal: Object  if (!childVal) return parentVal  if (!parentVal) return childVal  var ret = Object.create(null)  extend(ret, parentVal)  extend(ret, childVal)  //  child的会覆盖parent的  return ret}

同样来看源码，函数解构同样返回一个新的 res 对象，同样适用了 extend 方法拓展了 res 对象。但是要注意的是，先拓展的是 parentVal 对象，然后再拓展 childVal对象，这就意味着当拓展 chilidVal 对象的时候，如果 childVal中有 parentVal 的同名属性时，将会直接覆盖掉。这里顺便贴一下 extend 方法的源码

/** * Mix properties into target object. */function extend (to, _from) {  for (var key in _from) {    to[key] = _from[key]  }  return to }

options.watch

/** * Watchers. * * Watchers hashes should not overwrite one * another, so we merge them as arrays. * 不应该重写（覆盖）,应该保存在一个数组里 */strats.watch = function (parentVal, childVal) {   /* istanbul ignore if */  if (!childVal) return parentVal  if (!parentVal) return childVal  var ret = {}  extend(ret, parentVal) // ret首先获得parentVal的全部属性  for (var key in childVal) {    var parent = ret[key] // 子组件的某个watcher在父组件中的值    var child = childVal[key]    if (parent && !Array.isArray(parent)) {      parent = [parent] // 如果parent不是一个数组，将其包装成一个数组    }    ret[key] = parent      ? parent.concat(child) // parent在前，child在后      : [child] // 如果在父组件中不存在，以数组的形式存储子组件的watcher  }  return ret}

子组件和父组件的watchers不应该覆盖，而是应该把它们都合并在一个数组里。这里同样是父组件的在前，子组件的在后。

options.data

data 是个重头戏，也是整个合并策略中最复杂的，这是因为，在组件中data是以函数的形式存在的。

/* * */strats.data = function (  parentVal,  childVal,  vm // 如果传入了vm，那么它表示的是组件的根实例) {  if (!vm) { // 如果没传入    // in a Vue.extend merge, both should be functions    if (!childVal) {      return parentVal    }    if (typeof childVal !== 'function') {  // 在组件中定义data 必须是一个函数      "development" !== 'production' && warn(        'The "data" option should be a function ' +        'that returns a per-instance value in component ' +        'definitions.',        vm      )      return parentVal // 报完错，返回parentVal的data    }    if (!parentVal) {      return childVal // parentVal不存在，返回 childVal的data    }    // 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.    // 这里返回的应该是一个函数，函数返回结果是合并后的data对象    return function mergedDataFn () {      return mergeData(        childVal.call(this),        parentVal.call(this)      )    }  } else if (parentVal || childVal) { // 如果提供了vm实例    return function mergedInstanceDataFn () { // 同样返回一个函数      // instance merge      var instanceData = typeof childVal === 'function'        ? childVal.call(vm)        : childVal      var defaultData = typeof parentVal === 'function'        ? parentVal.call(vm)        : undefined // 如果parentVal不是函数，则抛弃。      if (instanceData) {        return mergeData(instanceData, defaultData)      } else {        return defaultData      }    }  }}

/** * Helper that recursively merges two data objects together. * 合并规则： * 1. 如果from中的某个属性to中有，保留to中的，什么都不做。 * 2. 如果to中没有，赋值。 * 3. 如果to中和from中的某个属性值都是对象，递归调用。 */function mergeData (to, from) {   var key, toVal, fromVal  for (key in from) {    toVal = to[key]    fromVal = from[key]    if (!hasOwn(to, key)) {      set(to, key, fromVal) // 设置to[key] = fromVal    } else if (isObject(toVal) && isObject(fromVal)) {      mergeData(toVal, fromVal)  // 如果对应的值都是对象，则递归合并。    }  }  return to}

代码中注释都写得很清楚了，这里就不多说了。 Vue 中对于 data 属性的合并就是执行 parentVal 和 childVal 的函数，然后再合并函数返回的对象。

自定义合并策略

以上所说的都是 Vue 自定义的合并的策略，当然你也可以自定义某个选项的合并策略。

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {  // return mergedVal}

比如想要修改 watch的合并策略

Vue.config.optionMergeStrategies.watch = function (toVal, fromVal) {  // return mergedVal}

至于传入的函数参数，可以参考之前讲解的源码。

全文完