前言
先来看看vue官方文档给出的一个解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。看了还是一脸懵逼是不是？
简单理解：mixin就是用来【复用】某一些功能的
接着官方文档又说：一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
我们先来分析这个"混入对象"，从这句话中我们可以知道这个混入对象可以包含任意组件选项，那么就是说我们平常写vue组件里面的所有东西都是可以加入到混入对象里面的，比如data、生命周期钩子，method等等。这个混入对象最总会被按照一定的策略【混入】(可以往后看)到目的组件中。
官网例子
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
根据前言里面我们分析的，“mixin就是用来【复用】某一些功能的”，我们可以看到这个例子首先定义了一个混入对象，那么这个混入对象就是可以【复用】的。我们还分析了“这个混入对象可以包含任意组件选项”，就拿官网这个例子来说，这个混入对象包含了created这个钩子和methods方法。
接着使用Vue.extend使用基础的Vue构造器，创建了一个“子类”，这个子类是可以实例化vue实例的，不过实例化后的实例带有这个子类所定义的一些东西，上面的例子中就是created钩子和method中的hello方法。这就定义了一个使用混入对象的组件Component.
Vue.extend : 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
最后的代码实例化了一个component实例，可以看到输出的是hello from mixin，那么就说明混入对象中的created钩子里面的方法执行了，这我们就可以简单理解了vue文档中关于mixin的简单概念。
选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。vue官网给了三种选项合并的情况
1. 数据对象内
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
2. 钩子函数
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
3.值为对象的选项
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
全局混入
文档原话：混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
这里面需要理解的就是this.$options的使用了，传送门
未完待续...
