vue源碼學習--合並策略對象mergeOptions

源碼vue在實例化對象、vue子類聲明的時候會對父實例和子實例的參數使用設定好的合並策略合並父、子實例的參數。以及實例化前期、數據綁定時均有使用到合並策略合並參數。

定義合並策略的js文件路徑是：\vue-dev\src\core\util\options.js

在合並策略中對不同類型的參數使用了不同的合並策略。例如：strat.data合並data、defaultStrat合並[el、propsData和name]、mergrHook 合並生命周期的鈎子函數、mergeAssets合並[component、directives、filter]等。

這些合並策略通過入口函數mergeOptions (parent, child, vm)中對合並參數對象中的不同屬性進行合並策略選擇。

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
  }

  if (typeof child === 'function') {
    child = child.options
  }

  normalizeProps(child, vm)//格式化prop為基於對象的格式
  normalizeInject(child, vm)//格式化Inject為基於對象的格式
  normalizeDirectives(child)//格式化directives為對象的格式
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  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)
  }
  return options
}

從上面mergeField函數中可以看出，Strats綁定處理參數中的各種數據的方法，統一在入口方法mergeOptions中被調用。源碼在定義strats的時的注釋也做了相應的說明，如下：

/**
 * Option overwriting strategies are functions that handle
 * how to merge a parent option value and a child option
 * value into the final value.
 */
const strats = config.optionMergeStrategies

1. 合並生命周期的鈎子函數和props參數的方法為mergeHook

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

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

 mergeHook方法實現思路及源碼如下：

 

 用人話總結這個合並規則就是：只有父時返回父，只有子時返回數組類型的子。父、子都存在時，將子添加在父的后面返回組合而成的數組。這也是父子均有鈎子函數的時候，先執行父的后執行子的的原因。源碼如下：

/**
 * Hooks and props are merged as arrays.
 */
function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

2.strats.data合並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.call(this, parentVal, childVal)
  }

  return mergeDataOrFn(parentVal, childVal, vm)
}

　　由源碼最后可知無論是vm存在與否最后都調用了mergeDataOrFn函數。這個函數根據vm是否存在，對parentVal和childVal做出不同的處理。但是無論vm存在不存在最終都會調用mergeData函數，將parentVal和childVal合並成最終值。所以介紹mergeDataOrFn函數之前先介紹mergeData這個函數。源碼如下：

function mergeData (to: Object, from: ?Object): Object {
  if (!from) return to
  let key, toVal, fromVal
  const keys = Object.keys(from)
  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    toVal = to[key]
    fromVal = from[key]
    if (!hasOwn(to, key)) {
      set(to, key, fromVal)
    } else if (isPlainObject(toVal) && isPlainObject(fromVal)) {
      mergeData(toVal, fromVal)
    }
  }
  return to
}

　　用人話總結這個合並規則就是：

　　　　1.如果from【childVal】中的某個屬性to【parentVal】中也有，保留to中的，什么也不做

　　　　2.如果to中沒有，將這個屬性添加到to中

　　　　3.如果to和from中的某個屬性值都是對象，則遞歸調用，進行深度合並。

　　無論vm存在不存在mergeDataOrFn最終都會調用mergeData函數，將parentVal和childVal合並成最終值。那么接下來看mergeDataOrFn中對parentVal和childVal做了什么處理。

　　邏輯圖如下：

　　源碼如下：

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) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this) : parentVal
      )
    }
  } else if (parentVal || childVal) {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

 3.strats.provide = mergeDataOrFn。provide使用mergeDataOrFn進行合並

4.strats.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
}

　　注釋里說了：watchers不應該重寫，應該保存在一個數組里。這就是watch數據合並的策略核心。

　　　　1.定義ret並讓ret獲得parentVal的所有屬性。

　　　　2.遍歷 childVal的所有屬性，如果ret（即parentVal）中也有的話，就把ret的屬性值弄成一個數組，把childVal的同名屬性值放在ret同名值得后面。如果不存在就把childVal弄成一個數組。

　　　　3.最后都將數組的值賦值給ret，拓展ret的屬性和屬性值。

　　這個策略其實就是，子組件、父組件都存在的時候，把watch相同值得方法放在一個數組里，父前子后。

5.strats.component、strats.directive、strats.filter源碼如下：

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]
/**
 * 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
  }
}

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

　　這個合並策略的核心就是：將childVal的全部屬性通過原型委托在parentVal上。parentVal成為了childVal的原型對象。

　　所以需要查找某個component、directive、filter，首先會在childVal中查找，如果沒有就在其原型對象上查找。

　　即子組件有就用子組件的，子組件沒有向上在父組件中尋找。

6.strats.props 、strats.methods 、strats.inject 、strats.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
}

　　這種合並策略的特點就是子會覆蓋父。

　　　　1.先將parentVal的所有屬性擴展給res

　　　　2.再將childVal的所有屬性擴展給res。此時，若是parentVal和childVal擁有同名屬性的話，子的屬性就會覆蓋父的。也就是同名方法只會執行子的。

7.其他的屬性使用的就是默認合並策略：defaultStrat。源碼如下：

/**
 * Default strategy.
 */
const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined
    ? parentVal
    : childVal
}

　　默認策略就是：子組件的選項不存在，才會使用父組件的選項，如果子組件的選項存在，使用子組件自身的。

　　因為是不會對parentVal和childVal進行分解的。所以默認策略一般用於合並比較簡單，不包含函數的屬性，例如el。

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

 

注：本文章中學習的源碼版本為vue  2.5.2. 文章中涉及的觀點和理解均是個人的理解，如有偏頗或是錯誤還請大神指出，不吝賜教，萬分感謝~