上一节深入剖析Vue源码 - 选项合并(上)的末尾，我们介绍了Vue中处理合并选项的思路，概括起来主要有两点，一是当选项存在定义好的默认配置策略时，优先选择默认配置策略，并且根据不同的配置项来合并子父选项; 二是当传入选项不存在默认策略时，处理的原则是有子类配置选项则默认使用子类配置选项，没有则选择父类配置选项。vue中，大部分选项都有其自定义策略，因此本节分析的重点也放在了各种自定义配置策略中(内置资源选项，生命周期钩子选项，el, data, watch, props等)。
首先还是回顾一下选项合并的代码，strat这个对象包含了所以自定义的默认策略。
function mergeOptions ( parent, child, vm ) {
···
var options = {};
var key;
for (key in parent) {
mergeField(key);
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key);
}
}
function mergeField (key) {
var strat = strats[key] || defaultStrat; // 如果有自定义选项策略，则使用自定义选项策略，否则选择子类配置选项
options[key] = strat(parent[key], child[key], vm, key);
}
return options
}
1.5 资源选项的自定义策略
在上一节中，我们知道Vue构造函数自身有options的配置选项,分别是components组件, directive指令, filter过滤器，在创建实例之前，程序会将内置组件和内置指令分别挂载到components和directive属性上。
var ASSET_TYPES = [
'component',
'directive',
'filter'
];
ASSET_TYPES.forEach(function (type) {
Vue.options[type + 's'] = Object.create(null); // Vue构造器拥有的默认资源选项配置
});
// Vue内置组件
var builtInComponents = {
KeepAlive: KeepAlive
};
var platformComponents = {
Transition: Transition,
TransitionGroup: TransitionGroup
};
// Vue 内置指令，例如： v-model, v-show
var platformDirectives = {
model: directive,
show: show
};
// 将_from对象合并到to对象，属性相同时，则覆盖to对象的属性
function extend (to, _from) {
for (var key in _from) {
to[key] = _from[key];
}
return to
}
extend(Vue.options.components, builtInComponents);
extend(Vue.options.components, platformComponents); // 扩展内置组件
extend(Vue.options.directives, platformDirectives); // 扩展内置指令
构造函数的默认资源选项配置如下：
Vue.options = {
components: {
KeepAlive: {}
Transition: {}
TransitionGroup: {}
},
directives: {
model: {inserted: ƒ, componentUpdated: ƒ}
show: {bind: ƒ, update: ƒ, unbind: ƒ}
},
filters: {}
_base
}
在实例化Vue，或者实例化子类时，这一类资源选项是如何合并的呢？
// 资源选项自定义合并策略
function mergeAssets (parentVal,childVal,vm,key) {
var res = Object.create(parentVal || null); // 创建一个空对象，其原型指向父类的资源选项。
if (childVal) {
assertObjectType(key, childVal, vm); // components,filters,directives选项必须为对象
return extend(res, childVal) // 子类选项赋值给空对象
} else {
return res
}
}
ASSET_TYPES.forEach(function (type) {
strats[type + 's'] = mergeAssets; // 定义默认策略
});
简单总结一下，对于 directives、filters 以及 components 等资源选项，父类选项将以原型链的形式被处理。子类必须通过原型链才能查找并使用内置组件和内置指令。
1.6 生命周期钩子选项自定义策略
我们知道掌握vue的生命周期钩子是使用vue高效开发组件的重点，这是vue官方的生命周期图
image
从源码中我们也可以看到vue中有多达12个钩子，而在选项合并的时候，生命周期钩子选项是遵循的以下的规则合并的。
var LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured',
'serverPrefetch'
];
LIFECYCLE_HOOKS.forEach(function (hook) {
strats[hook] = mergeHook; // 对生命周期钩子选项的合并都执行mergeHook策略
});
function mergeHook (parentVal,childVal) {
var res = childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal; // 1.如果子类和父类都拥有钩子选项，则将子类选项和父类选项合并, 2如果父类不存在钩子选项，子类存在时，则以数组形式返回子类钩子选项， 3.当子类不存在钩子选项时，则以父类选项返回。
return res
? dedupeHooks(res)
: res
}
// 防止多个组件实例钩子选项相互影响
function dedupeHooks (hooks) {
var res = [];
for (var i = 0; i < hooks.length; i++) {
if (res.indexOf(hooks[i]) === -1) {
res.push(hooks[i]);
}
}
return res
}
简单总结，对于生命周期钩子选项，子类和父类的选项将合并成数组，这样每次执行子类的钩子函数时，父类钩子选项也会执行。
1.7 其他自定义策略
Vue自定义选项策略还有很多，我们继续列举其他几个例子。
1.7.1 el合并
我们只在创建vue的实例时才会执行节点挂载，在子类或者子组件中无法定义el选项，代码实现如下
strats.el = function (parent, child, vm, key) {
if (!vm) { // 只允许vue实例才拥有el属性，其他子类构造器不允许有el属性
warn(
"option \"" + key + "\" can only be used during instance " +
'creation with the `new` keyword.'
);
}
return defaultStrat(parent, child)
};
// 用户自定义选项策略
var defaultStrat = function (parentVal, childVal) {
return childVal === undefined
? parentVal
: childVal
};
1.7.2 data合并
另一个合并的重点是data的合并策略，data在vue创建实例时传递的是一个对象，而在组件内部定义时只能传递一个函数，
strats.data = function (parentVal, childVal, vm) {
if (!vm) {
if (!vm) {// 判断是否为Vue创建的实例，否则为子父类的关系
if (childVal && typeof childVal !== 'function') { // 必须保证子类的data类型是一个函数而不是一个对象
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); // vue实例时需要传递vm作为函数的第三个参数
};
做了data选项的检验后，重点关注mergeDataOrFn函数的内部逻辑，代码中依然通过vm来区分是否为子类构造器的data合并。
function mergeDataOrFn ( parentVal, childVal, vm ) {
if (!vm) {
if (!childVal) { // 子类不存在data选项，则合并结果为父类data选项
return parentVal
}
if (!parentVal) { // 父类不存在data选项，则合并结果为子类data选项
return childVal
}
return function mergedDataFn () { // data选项在父类和子类同时存在的情况下返回的是一个函数
// 子类实例和父类实例，分别将子类和父类实例中data函数执行后返回的对象传递给mergeData函数做数据合并
return mergeData(
typeof childVal === 'function' ? childVal.call(this, this) : childVal,
typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
)
}
} else {
// vue构造函数实例对象
return function mergedInstanceDataFn () {
var instanceData = typeof childVal === 'function'
? childVal.call(vm, vm)
: childVal;
var defaultData = typeof parentVal === 'function'
? parentVal.call(vm, vm)
: parentVal;
if (instanceData) {
// 当实例中传递data选项时，将实例的data对象和Vm构造函数上的data属性选项合并
return mergeData(instanceData, defaultData)
} else {
// 当实例中不传递data时，默认返回Vm构造函数上的data属性选项
return defaultData
}
}
}
}
如何实现数据合并,数据合并时，vue会将数据变化加入响应式系统中，我们先跳过响应式系统的构建部分，只关注单纯的数据合并。数据合并的原则是，将父类的数据整合到子类的数据选项中， 如若父类数据和子类数据冲突时，保留子类数据。
function mergeData (to, from) {
if (!from) { return to }
var key, toVal, fromVal;
var keys = hasSymbol
? Reflect.ownKeys(from)
: Object.keys(from);
for (var i = 0; i < keys.length; i++) {
key = keys[i];
toVal = to[key];
fromVal = from[key];
if (!hasOwn(to, key)) {
set(to, key, fromVal); // 当子类数据选项不存在父类的选项时，将父类数据合并到子类数据中，并加入响应式系统中。
} else if ( // 处理深层对象，当合并的数据为多层嵌套对象时，需要递归调用mergeData进行比较合并
toVal !== fromVal &&
isPlainObject(toVal) &&
isPlainObject(fromVal)
) {
mergeData(toVal, fromVal);
}
}
return to
}
思考一个问题，为什么Vue组件的data是一个函数，而不是一个对象呢？
我觉得这样可以方便理解：组件的目的是为了复用，每次通过函数创建相当于在一个独立的内存空间中生成一个data的副本，这样每个组件之间的数据不会互相影响。
1.7.3 watch 选项合并
对于 watch 选项的合并处理，类似于生命周期钩子，只要父选项有相同的观测字段，则合并为数组，在选项改变时同时执行父类选项的监听代码。处理方式和生命钩子选项的区别在于，生命钩子选项必须是函数或者数据，而watch选项则为对象。
strats.watch = function (parentVal,childVal,vm,key) {
if (parentVal === nativeWatch) { parentVal = undefined; }
if (childVal === nativeWatch) { childVal = undefined; }
if (!childVal) { return Object.create(parentVal || null) }
{
assertObjectType(key, childVal, vm);
}
if (!parentVal) { return childVal }
var ret = {};
extend(ret, parentVal);
for (var key$1 in childVal) {
var parent = ret[key$1];
var child = childVal[key$1];
if (parent && !Array.isArray(parent)) {
parent = [parent];
}
ret[key$1] = parent
? parent.concat(child)
: Array.isArray(child) ? child : [child];
}
return ret
};
1.7.4 props,methods, inject, computed 合并
// 其他选项合并策略
strats.props =
strats.methods =
strats.inject =
strats.computed = function (parentVal,childVal,vm,key) {
if (childVal && "development" !== 'production') {
assertObjectType(key, childVal, vm);
}
if (!parentVal) { return childVal } // 父类不存在该选项，则返回子类的选项
var ret = Object.create(null);
extend(ret, parentVal); //
if (childVal) { extend(ret, childVal); } // 子类选项会覆盖父类选项的值
return ret
};
至此，vue初始化选项合并逻辑分析完毕。
喜欢本系列的朋友欢迎关注公众号 ‘ 假前端’，第一时间推送源码分析和每日算法
网友评论