Vue的mergeOptions函数分析-下

时间 2019-12-05

标签 vue mergeoptions 函数分析繁體版

原文原文链接

上篇文章分析了mergeOptions函数的主要逻辑，最后知道是分别遍历俩个选项对象都去执行mergeField函数，其中mergeField函数实际上是根据不一样的key值来获取到相应的合并策略，从而执行真正的合并。接下来咱们主要分析下Vue针对不一样的内部选项实施的合并策略javascript

defaultStrat

咱们再看一下mergeField函数，当strats[key]不存在时，会采起defaultStrat做为合并策略。也就是说若是咱们不向Vue.config.optionMergeStrategies添加额外的策略，那就会采起默认的合并策略。html

function mergeField (key) {
  const strat = strats[key] || defaultStrat
  options[key] = strat(parent[key], child[key], vm, key)
}
复制代码

咱们能够在当前文件中找到defaultStrat函数以下，默认合并策略超简单，就是当子选项childVal存在时，就会采用子选项。也就是覆盖式的合并。vue

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

咱们能够经过Vue.util.mergeOptions()来看一看defaultStrat的合并效果，以下图，当咱们父选项parentVal、子选项childVal上都存在name属性时，合并的对象会采用子选项上的值。可是当咱们设置Vue.config.optionMergeStrategies.name后，mergeField函数就会采用咱们设置好的合并策略，结果会将俩个值相加。 java

el和propsData

if (process.env.NODE_ENV !== 'production') {
  strats.el = strats.propsData = function (parent, child, vm, key) {
    // 没有传vm说明 不是实例化时候 调用的mergeOptions
    if (!vm) {
      warn(
        `option "${key}" can only be used during instance ` +
        'creation with the `new` keyword.'
      )
    }
    // 采用默认的策略
    return defaultStrat(parent, child)
  }
}
复制代码

能够发现，el和propsData的合并就是采用了默认的合并策略(覆盖式)，但在非生产环境下，会多一步判断，判断若是没有传vm参数则给出警告，el、propsData参数只能用于实例化。那根据vm就能够判断出是不是实例化时候调用的嘛？这里是确定的。前文咱们提到过Vue.extend、Vue.mixin调用mergeOptions是不传入第三个参数的，mergeOptions调用mergeField函数又会把vm传入进去，因此说vm没有传就为undefined，就能够说明不是实例化时调用的。再说一点，用vm也能够判断出是不是处理子组件选项，由于子组件的实现方式是经过实例化子类完成的，而子类又是经过Vue.extend创造出来的。数组

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)
}
复制代码

根据?Function能够知道data的合并会返回一个函数，这里也会先判断有没有传入vm，若是没有传入，会判断子选项data是不是函数，不是函数的话直接返回父选项data而且给出警告。这个警告应该在咱们刚开始用Vue都有遇到过，这是为了防止对象引用形成修改会影响到其余组件的data。若是是函数，则调用mergeDataOrFn函数。那咱们能够发现，无论传没传vm参数，都会调用mergeDataOrFn函数来返回一个函数。那接下来咱们看一下mergeDataOrFn函数干了什么。浏览器

export function mergeDataOrFn ( parentVal: any, childVal: any, vm?: Component): ?Function {
  // 没有vm参数，表明是用 Vue.extend、Vue.mixin合并，
  if (!vm) {
    // 若是没有childVal,返回parentVal 
    if (!childVal) {
      return parentVal
    }
    // 若是没有parentVal,返回childVal
    if (!parentVal) {
      return childVal
    }
    // 返回一个合并data函数
    return function mergedDataFn () {
       // 当调用mergedDataFn才会执行mergeData
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    // 返回一个合并data函数
    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) {
        // 若是子选项data有值，则经过mergeData合并。
        // 当调用mergedInstanceDataFn才会执行mergeData
        return mergeData(instanceData, defaultData)
      } else {
        // 子选项data没有值，直接返回默认data
        return defaultData
      }
    }
  }
}
复制代码

上面mergeDataOrFn函数分为俩种状况，一种是没有vm参数说明是处理子组件合并data选项的，另外一种是有vm参数说明是实例化处理data的合并。ide

咱们先看一下处理子组件的状况，首先判断没有childVal返回parentVal，没有parentVal返回childVal。若是俩个都有值，则返回mergedDataFn函数。下图分别展现了三种状况的合并效果。函数

经过Parent.mixin()触发合并，此时parentVal已经通过Vue.extend合并过。childVal没有data选项

经过Vue.extend()触发合并，此时parentVal是Vue.options没有data选项，childVal有data选项

parentVal、childVal都有值时，返回mergedDataFn函数

再看一下处理实例化时data合并的状况，处理实例化时data合并直接返回mergedInstanceDataFn函数。 post

咱们能够发现，俩种状况都是返回函数，而且函数中都是先判断parentVal、childVal是不是函数，是函数的话直接执行函数获取纯对象，最后都经过mergeData来返回合并后的纯对象。因此说mergeData函数是真正用来合并选项对象的，那咱们在来看一下这个函数。fetch

// 将from的属性添加到to上，最后返回to
function mergeData (to: Object, from: ?Object): Object {
  // 若是没有from、直接返回to
  if (!from) return to
  let key, toVal, fromVal
  // 取到from的key值，用于遍历
  const keys = hasSymbol
    ? Reflect.ownKeys(from)
    : Object.keys(from)
  
  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    // 对象被观察了，会有__ob__属性，__ob__不做处理
    if (key === '__ob__') continue
    toVal = to[key]
    fromVal = from[key]
    // 若是to上没有该属性，则直接将from对应的值赋值给to[key]
    if (!hasOwn(to, key)) {
      set(to, key, fromVal)
    } else if (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      // 若是 to、from都有值，而且不相同，并且都是纯对象的话，
      // 则递归调用mergeData进行合并
      mergeData(toVal, fromVal)
    }
  }
  return to
}
复制代码

mergeData函数很简单，就是将parentVal的data纯对象(from)所拥有的属性添加到childVal的data纯对象(to)，最后返回合并的纯对象。若是其中俩个纯对象上有相同的key值，则比较是否相等，若是相等什么都不用作，不相等的话，则递归合并。

Hook钩子函数

// 钩子函数当作数组合并来处理，最后返回数组
function mergeHook ( parentVal: ?Array<Function>, childVal: ?Function | ?Array<Function> ): ?Array<Function> {
  const res = childVal
    ? parentVal  // childVal有值
      ? parentVal.concat(childVal) // parentVal有值，与childVal直接数组拼接
      : Array.isArray(childVal) // parentVal没有值，将childVal变成数组
        ? childVal
        : [childVal]
    // childVal没有值直接返回parentVal
    : 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
}
// src/shared/constants 文件夹定义
const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]
// 全部钩子函数采用一种合并策略
LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})
复制代码

生命周期的钩子选项合并也很是简单，就是把合并当作数组拼接。若是其中一个纯对象没有，则把另外一方变成数组返回。这里有俩点须要提一下:

在判断childVal没有直接返回parentVal和当俩个对象都有的时候经过parentVal.concat()拼接，都直接把parentVal当作数组来处理。说明parentVal必定是数组，由于若是parentVal有值，那必定是被mergeOptions处理过一次啦，因此会变成数组。
上面有判断Array.isArray(childVal)，而不是直接变成数组。，说明childVal能够是个数组，以下图，咱们能够给created传入数组也能够

component、directive、filter

function mergeAssets ( parentVal: ?Object, childVal: ?Object, vm?: Component, key: string ): Object {
  // 建立一个空对象，经过res.__proto__能够访问到parentVal
  const res = Object.create(parentVal || null)
  // 若是childVal有值，则校验childVal[key]是不是对象，不是给出警告。
  // extend函数是将childVal的属性添加到res上，
  if (childVal) {
    process.env.NODE_ENV !== 'production' && assertObjectType(key, childVal, vm)
    return extend(res, childVal)
  } else {
    return res
  }
}
// component、directive、filter
ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})
复制代码

component、directive、filter选项的合并是先将parentVal添加到res.__proto__上，而后把childVal添加到res上。当咱们使用组件时，Vue会一层一层的向上查找。这也就是为何咱们没有引入KeepAlive、Transition、TransitionGroup内置组件，却能够直接在template中使用，由于在合并时，就已经将内置组件合并到components对象的原型链上。以下图：

watch

strats.watch = function ( parentVal: ?Object, childVal: ?Object, vm?: Component, key: string ): ?Object {
  // Firefox浏览器自带watch，若是是原生watch，则置空
  if (parentVal === nativeWatch) parentVal = undefined
  if (childVal === nativeWatch) childVal = undefined
  // 若是没有childVal，则建立返回空对象，经过__proto__能够访问parentVal
  if (!childVal) return Object.create(parentVal || null)
  // 非正式环境检验校验childVal[key]是不是对象，不是给出警告。
  if (process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  // 若是没有parentVal，返回childVal
  if (!parentVal) return childVal
  // parentVal和childVal都有值的状况
  const ret = {}
  // 把parentVal属性添加到ret
  extend(ret, parentVal)
  // 遍历childVal
  for (const key in childVal) {
    let parent = ret[key]
    const child = childVal[key]
    // 若是parent存在，则变成数组
    if (parent && !Array.isArray(parent)) {
      parent = [parent]
    }
    // 返回数组
    ret[key] = parent
      ? parent.concat(child)
      : Array.isArray(child) ? child : [child]
  }
  return ret
}
复制代码

watch的选项合并简单说就是判断父子是否都有监听同一个值，若是同时监听了，就变成一个数组。不然就正常合并到一个纯对象上就能够。watch也能够为一个值建立监听数组，例如：

export default {
  watch: {
    key: [
      function() {
        console.log('key 改变1')
      },
      function() {
        console.log('key 改变2')
      }
    ]
  }
}
复制代码

props、methods、inject、computed

strats.props =
strats.methods =
strats.inject =
strats.computed = function ( parentVal: ?Object, childVal: ?Object, vm?: Component, key: string ): ?Object {
  // 非正式环境检验校验childVal[key]是不是对象，不是给出警告。
  if (childVal && process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  // 若是没有parentVal 返回childVal
  if (!parentVal) return childVal
  const ret = Object.create(null)
  // 将parentVal属性添加到ret
  extend(ret, parentVal)
  // 若是childVal有值，也将属性添加到ret
  if (childVal) extend(ret, childVal)
  return ret
}
复制代码

props、methods、inject、computed选项的合并是合并到同一个纯对象上，对于父子有一样的key值，采起子选型上对应的值。

provide

// provide选型合并采用data选项的合并策略
strats.provide = mergeDataOrFn
复制代码