1.合并
一种分发Vue组件中可复用功能的方式
var mixin = {
//同名钩子合并为一个数组,依次调用
created: function () {
console.log('混合对象的钩子被调用');
},
//methods, components, directives同名函数合并,取组件对象中的键值对
methods: {
confliction: function () {
console.log('混合对象');
}
}
};
//输出:
//混合对象的钩子被调用
//组件钩子调用
var app = new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子调用');
},
methods: {
confliction: function () {
console.log('组件对象');
}
}
});
//输出:组件对象
app.confliction();
Vue.extend()合并策略相同
2.全局混合
//输出:66
Vue.mixin({
created: function () {
console.log(this.$options.name);
}
});
new Vue({
name: "66"
});
谨慎使用全局混合对象,会影响每个单独创建的Vue实例
3.自定义选项合并策略
使用Vue.config.optionMergeStrategies添加,自定义合并策略