理解：一个混入对象可以包含任意组件选项，这些选项将混入到组件本身的选项；
作用：用来分发Vue组件中的可服用功能；
局部混入
//选项合并
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
},
created: function () {
console.log('混入对象的钩子被调用');
},
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log('组件钩子被调用');
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
},
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
通过上面的例子，可以得出结论：
- 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”,
发生冲突时以组件数据优先 - 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将
在组件自身钩子之前调用。 - 值为对象的选项，例如 methods、components 和 directives，将被合并为同
一个对象。两个对象键名冲突时，取组件对象的键值对。
全局混入
一旦使用全局混入，它将影响每个单独创建的 Vue 实例 (包括第三方组件)，项目开发中不推荐，请谨慎使用。
