Vue2.x源码学习笔记(十一)——mergeOptions

154 阅读3分钟

mergeOptions用来合并两个选项,出现相同配置项时,子选项会覆盖父选项的配置

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)
  normalizeInject(child, vm)
  normalizeDirectives(child)
  if (!child._base) {
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, 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)
    }
  }
  
  return options
}

首先通过checkComponents去校验子项中所有注册组件的名字是否正确。如果子项是函数则获取它的options。然后标准化props、inject、directive选项,方便后续程序的处理。因为mergeOptions 处理过的对象会含有_base属性,因此对于没有_base属性的需要进行处理:处理原始 child 对象上的extends和mixins,分别执行mergeOptions,将这些继承而来的选项合并到parent。

遍历父项调用mergeField,然后再遍历子项,如果子项中的key不在父项中则调用mergeField。

mergeField

config.optionMergeStrategies=Object.create(null)
const strats = config.optionMergeStrategies
//会对strats扩展不同的合并方法
function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
}
const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined
    ? parentVal
    : childVal
}

遍历父项时,如果当前的key不在合并策略中时则调用defaultStrat去合并:如果子项中没有这个key配置,则将父项的key配置添加到options中。如果子项中也有这个key配置,那么子项的优先级高,则在options中存放子项的这个key。

遍历子项时,如果父选项不存在该配置,则合并:将子项key配置添加到options中。

strats.el和strats.propsData

strats.el = strats.propsData = function (parent, child, vm, key) {
    if (!vm) {
      //error
    }
    return defaultStrat(parent, child)
  }

在合并el和propsData时会判断是否传了实例参数,如果没有传则会抛出警告,因为el和propsData只能在实例上。如果传了实例,则还会通过defaultStrat去合并。

生命周期hook的合并策略

const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]
LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})
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
}

生命周期的合并策略都是用通过mergeHook去合并的,逻辑就是如果不存在childVal,就返回parentVal;否则再判断是否存在parentVal,如果存在就把childVal添加到parentVal后返回新数组;如果parentVal不存在,就返回childVal数组。最终res是一个数组。然后通过dedupeHooks函数将res数组去重,最终返回res添加到options中。

components,directives,filters的合并策略

const ASSET_TYPES = ['component','directive','filter']
ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})
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
  }
}
function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

如果parentVal存在则根据parentVal创建一个对象,parentVal不存在就创建一个空对象。如果childVal不存在则直接返回创建的那个对象。否则通过extend将子项合并过去。

strats.props,strats.methods,strats.inject,strats.computed

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
}

不存在父项直接返回子项添加到options中,存在子项则将子项合并到父项。

strats.watch

strats.watch = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  if (parentVal === nativeWatch) parentVal = undefined
  if (childVal === nativeWatch) childVal = undefined
  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
}

对于火狐浏览器下的情况特殊处理。遍历子项,将key添加到ret对象中,如果key在子项和父项中都存在,就将对应的值合并成一个数组添加到ret中。如果key只存在于子项中则将key对应的值包装成数组添加到ret中,返回ret。

strats.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(parentVal, childVal)
  }
  return mergeDataOrFn(parentVal, childVal, vm)
}

如果没有传递实例参数会校验子项的data是否是一个function,如果不是function,则不会合并,并且抛出警告。如果是function则调用mergeDataOrFn去合并。

mergeDataOrFn

export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    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 () {
      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
      }
    }
  }
}

这里主要是判断两个合并项是否是函数,如果是函数则调用函数获取值然后通过mergeData合并。

mergeData

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]
    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
}

获取父项所有keys并兼容symbol类型,遍历keys,跳过对__ob__响应式标记这个key的处理。如果子项中没有对应的key,则通过set方法响应式的添加到子项。如果这个key在父项和子项中对应的值都是对象,则递归调用mergeData合并data。

strats.provide

strats.provide = mergeDataOrFn