optionMergeStrategies
主要用于 mixin
以及 Vue.extend()
方法时对于子组件和父组件如果有相同的属性(option)时的合并策略
自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies
添加一个函数:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
Vue.config.optionMergeStrategies
是个什么东西?
是Vue实例的所有方法
是不是可以在上面添加一些自己的方法呢
// 接收一下optionMergeStrategies
const myOptionMergeStrategies = Vue.config.optionMergeStrategies
// 使用created这个生命周期函数作为我要合并的对象,并定义了一个 notInCurrentWindow 方法
myOptionMergeStrategies.notInCurrentWindow = myOptionMergeStrategies.created
// 自定义一个方法
const fn = (name, vm) => {
const lifeCycles = vm.$options[name]
if (lifeCycles && lifeCycles.length) {
lifeCycles.forEach(lc => lc.call(vm));
}
// 子组件同样可以使用当前的自定义选项合并
const children = vm.$children
if (children && children.length) {
children.forEach(child => fn(name, child))
}
}
const bind = vm => {
// 监听一下window窗口的进入和离开事件
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
fn('notInCurrentWindow', vm)
}
})
}
const vm = new Vue({
el: document.querySelector('#root'),
template: `
<h1>hello world !</h1>
`,
notInCurrentWindow() {
// todo
alert('notInCurrentWindow 离开当前页面')
},
created() {
// todo
alert('created 离开当前页面')
},
})
// 把自定义选项合并注入到Vue实例
bind(vm)
自定义合并策略本质就是继承了Vue内置的这些api的同时,扩展了自定义的用法。
那这个时候就要想,既然说合并,那万一自定义的与本来的发生冲突了, Vue 是怎么处理的,让我们来扒一扒源码吧。
optionMergeStrategies
主要用于 mixin
以及 Vue.extend()
方法时对于子组件和父组件如果有相同的属性(option)时的合并策略。
默认的合并策略(defaultStrat)
var defaultStrat = function (parentVal, childVal) {
return childVal === undefined
? parentVal
: childVal
}
defaultStrat 函数,传入两个参数 parentVal
, childVal
分别对应于父组件和子组件的选项,如果子组件的选项不存在,才会使用父组件的选项,如果子组件的选项存在,使用子组件自身的。
options.el options.propsData
// config 是一个全局对象,对应于Vue.config
// config.optionMergeStrategies 初始化时是一个空对象
// config.optionMergeStrategies = Object.create(null)
var strats = config.optionMergeStrategies
if ("development" !== 'production') {
strats.el = strats.propsData = function (parent, child, vm, key) {
// 如果 vm 不存在,报错: key属性用在vm实例上
if (!vm) {
warn(
"option \"" + key + "\" can only be used during instance " +
'creation with the `new` keyword.'
)
}
return defaultStrat(parent, child)
}
strats.name = function (parent, child, vm) {
if (vm && child) {
warn(
'options "name" can only be used as a component definition option, ' +
'not during instance creation.'
)
}
return defaultStrat(parent, child)
}
}
el
, propsData
和 name
的合并策略就是默认的合并策略,即以子组件的选项为主,子组件的选项不存在时,才使用父组件的。
options.hook
function mergeHook (
parentVal,
childVal
) {
return childVal
? parentVal // 如果 childVal存在
? parentVal.concat(childVal) // 如果parentVal存在,直接合并
: Array.isArray(childVal) // 如果parentVal不存在
? childVal // 如果chilidVal是数组,直接返回
: [childVal] // 包装成一个数组返回
: parentVal // 如果childVal 不存在 直接返回parentVal
}
// strats中添加属性,属性名为生命周期各个钩子
config._lifecycleHooks.forEach(function (hook) {
strats[hook] = mergeHook // 设置每一个钩子函数的合并策略
})
这么多三元判断表达式,其实就是为了确保将多个相同的生命周期钩子合并为一个数组。
function mergeHook(parentVal, childVal, vm, key) {
// 如果子元素没有值,那么直接返回父元素
if (!childVal) {
return parentVal;
}
if (parentVal) {
return parentVal.concat(childVal);
}
else {
if (Array.isArray(childVal)) {
return childVal;
}
else {
return [childVal];
}
}
}
如果有多个生命周期钩子,则直接合并成数组并返回。s
如果父组件和子组件都设置了钩子函数选项,那么 它们会合并到一个数组里,而且父组件的钩子函数会先执行,最后返回一个合并后的数组。
options.components options.directives options.filters
function mergeAssets (parentVal, childVal) { // parentVal: Object childVal: Object
var res = Object.create(parentVal || null) // 原型委托
return childVal
? extend(res, childVal)
: res
}
config._assetTypes.forEach(function (type) {
strats[type + 's'] = mergeAssets
})
对于 assets
也就是 components
, directives
, filters
合并的策略就是返回一个合并后的新对象,新对象的自有属性全部来自 childVal
, 但是通过原型链委托在了 parentVal
上。
这里顺便提提在一个对象里查找属性的规则。举个例子,当查找一个属性时,如 obj[a] ,如果 obj 没有 a 这个属性,那么将会在 obj 对象的原型里找,如果还没有,在原型的原型上找,直到原型链的尽头,如果还没有找到,返回 undefined。
因此这里同样一个道理,在 res 对象里查找某个 component 或 directive , 首先会找 childVal里的,如果没有,才会沿着原型链向上,找 parentVal中对应的属性。事实上,和 defaultStrat 一个道理。
options.props options.methods options.computed
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) { // parentVal: Object childVal: Object
if (!childVal) return parentVal
if (!parentVal) return childVal
var ret = Object.create(null)
extend(ret, parentVal)
extend(ret, childVal) // child的会覆盖parent的
return ret
}
同样来看源码,函数解构同样返回一个新的 res 对象,同样适用了 extend 方法拓展了 res 对象。但是要注意的是,先拓展的是 parentVal 对象,然后再拓展 childVal对象,这就意味着当拓展 chilidVal 对象的时候,如果 childVal中有 parentVal 的同名属性时,将会直接覆盖掉。这里顺便贴一下 extend 方法的源码
/**
* Mix properties into target object.
*/
function extend (to, _from) {
for (var key in _from) {
to[key] = _from[key]
}
return to
}
options.watch
/**
* Watchers.
*
* Watchers hashes should not overwrite one
* another, so we merge them as arrays.
* 不应该重写(覆盖),应该保存在一个数组里
*/
strats.watch = function (parentVal, childVal) {
/* istanbul ignore if */
if (!childVal) return parentVal
if (!parentVal) return childVal
var ret = {}
extend(ret, parentVal) // ret首先获得parentVal的全部属性
for (var key in childVal) {
var parent = ret[key] // 子组件的某个watcher在父组件中的值
var child = childVal[key]
if (parent && !Array.isArray(parent)) {
parent = [parent] // 如果parent不是一个数组,将其包装成一个数组
}
ret[key] = parent
? parent.concat(child) // parent在前,child在后
: [child] // 如果在父组件中不存在,以数组的形式存储子组件的watcher
}
return ret
}
子组件和父组件的watchers不应该覆盖,而是应该把它们都合并在一个数组里。这里同样是父组件的在前,子组件的在后。
options.data
data 是个重头戏,也是整个合并策略中最复杂的,这是因为,在组件中data是以函数的形式存在的。
/*
*
*/
strats.data = function (
parentVal,
childVal,
vm // 如果传入了vm,那么它表示的是组件的根实例
) {
if (!vm) { // 如果没传入
// in a Vue.extend merge, both should be functions
if (!childVal) {
return parentVal
}
if (typeof childVal !== 'function') { // 在组件中定义data 必须是一个函数
"development" !== 'production' && warn(
'The "data" option should be a function ' +
'that returns a per-instance value in component ' +
'definitions.',
vm
)
return parentVal // 报完错,返回parentVal的data
}
if (!parentVal) {
return childVal // parentVal不存在,返回 childVal的data
}
// 这里返回的应该是一个函数,函数返回结果是合并后的data对象
return function mergedDataFn () {
return mergeData(
childVal.call(this),
parentVal.call(this)
)
}
} else if (parentVal || childVal) { // 如果提供了vm实例
return function mergedInstanceDataFn () { // 同样返回一个函数
// instance merge
var instanceData = typeof childVal === 'function'
? childVal.call(vm)
: childVal
var defaultData = typeof parentVal === 'function'
? parentVal.call(vm)
: undefined // 如果parentVal不是函数,则抛弃。
if (instanceData) {
return mergeData(instanceData, defaultData)
} else {
return defaultData
}
}
}
}
/**
* Helper that recursively merges two data objects together.
* 合并规则:
* 1. 如果from中的某个属性to中有,保留to中的,什么都不做。
* 2. 如果to中没有,赋值。
* 3. 如果to中和from中的某个属性值都是对象,递归调用。
*/
function mergeData (to, from) {
var key, toVal, fromVal
for (key in from) {
toVal = to[key]
fromVal = from[key]
if (!hasOwn(to, key)) {
set(to, key, fromVal) // 设置to[key] = fromVal
} else if (isObject(toVal) && isObject(fromVal)) {
mergeData(toVal, fromVal) // 如果对应的值都是对象,则递归合并。
}
}
return to
}
Vue 中对于 data 属性的合并就是执行 parentVal 和 childVal 的函数,然后再合并函数返回的对象。
总结:
- 普通的js原始值(string,number,boolean等)直接后者覆盖前者即可。
- 对象的合并,如果合并双方都是对象,则使用递归的方式将其合并(数组好像是直接覆盖,并没有进行特殊合并)
- 对于函数,如果需要他们合并后都可以执行,则可以考虑将函数合并成数组,然后你可以将其包装成一个新函数,依次调用合并后数组中的函数。
- 如果合并的是一些特殊对象,不能递归合并,那么根据情况,你还可以使用原型链的方式进行合并。
啊,好多啊,没事,慢慢学就行啦
参考文章:
https://segmentfault.com/a/1190000007087912
https://juejin.cn/post/6996677265715101704
https://blog.csdn.net/qq_33024515/article/details/87857999