vue2.0源碼解讀系列(二) - 打開vue神祕禮盒之合併選項(3)

接着上一篇標準化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上存在與child中watch的key
    • 若是parent上該key對應的值不是數組， 則返回[parent]
    • 合併parent和child的watch選項
  • 若是parent上不存在與child中watch的key 返回數組形式的child

終於熬完了合併選項的分析（三篇文章）， 天天抽出睡覺的時間來啃這塊， 很是不容易，促進本身成長， 但願也能給小可愛們帶去一些啓發， 若是有地方以爲說的不清楚的歡迎在下方評論區提問，討論~

看到這裏的小可愛們， 可順手點個贊鼓勵我繼續創做， 創做不易，一塊兒學習， 早日實現財富自由~