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初始化选项合并逻辑分析完毕。