上篇文章分析了mergeOptions函数的主要逻辑,最后知道是分别遍历俩个选项对象都去执行mergeField函数,其中mergeField
函数其实是根据不同的key值来获取到相应的合并策略,从而执行真正的合并。接下来我们主要分析下Vue针对不同的内部选项实施的合并策略
defaultStrat
我们再看一下mergeField
函数,当strats[key]
不存在时,会采取defaultStrat
作为合并策略。也就是说如果我们不向Vue.config.optionMergeStrategies
添加额外的策略,那就会采取默认的合并策略。
function mergeField (key) {
const strat = strats[key] || defaultStrat
options[key] = strat(parent[key], child[key], vm, key)
}
复制代码
我们可以在当前文件中找到defaultStrat
函数如下,默认合并策略超简单,就是当子选项childVal
存在时,就会采用子选项。也就是覆盖式的合并。
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
函数就会采用我们设置好的合并策略,结果会将俩个值相加。
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的合并。
我们先看一下处理子组件的情况,首先判断没有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
函数。
我们可以发现,俩种情况都是返回函数,并且函数中都是先判断parentVal
、childVal
是否是函数,是函数的话直接执行函数获取纯对象,最后都通过mergeData
来返回合并后的纯对象。所以说mergeData
函数是真正用来合并选项对象的,那我们在来看一下这个函数。
// 将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
复制代码