vue2.0源码解读之选项合并策略 optionMergeStrategies

转载请注明出处 https://segmentfault.com/a/11...

差很少看了快三周的 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
}

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

全文完