optionMergeStrategies
自定义合并策略的选项。
- 类型：
Function - 默认值：
{} - 用法：
// 在optionMergeStrategies对象上添加一个属性tip，tip必须是一个函数或者假值（false）
Vue.config.optionMergeStrategies.tip = function (parent, child, vm) {
return parent + '----' + child
}
/**
Vue.options的默认值：
Vue.options = {
'components': { /.../ },
'directives': { /.../ },
filters: { / ... / },
_base: function Vue() { }
}
*/
Vue.options.tip = '我是全局最顶层的Options'
var vue = new Vue({
el: '#app',
data: { }
})
var Child = Vue.extend({
tip: '我是子组件'
})
// => Child.options.tip = '我是全局最顶层的Options----我是子组件'
- 核心源码：
var config = ({
// ...
optionMergeStrategies: Object.create(null),
// ...
})
var strats = config.optionMergeStrategies;
var hasOwnProperty = Object.prototype.hasOwnProperty;
// 判断对象是否包含特定的自身（非继承）属性。
function hasOwn(obj, key) {
return hasOwnProperty.call(obj, key)
}
// 默认合并策略函数
var defaultStrat = function (parentVal, childVal) {
return childVal === undefined
? parentVal
: childVal
}
/**
* 合并options函数
*/
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) {
// strats[key]自定义合并策略
// 举个栗子：
// 当key为data时，start = strats.data = function () { //... }
// 如果没有strats[key]不存在，则使用默认的defaultStrat合并策略
var strat = strats[key] || defaultStrat; // 如果tip为假，则strat为defaultStrat
options[key] = strat(parent[key], child[key], vm, key); // 这就是为什么tip必须为函数的原因
}
return options
}
