前言：
在日常开发中，你是否会遇到类似的情况：有两个或者以上的相似的组件，他们有相同的功能函数 ，也有不同的功能函数，这种情况需要怎么操作呢？有人会想拆分成不同的组件，但这时候拆分的不同组件之间又有相同的代码，同时一旦相同的基础功能一更改，需要所有组件都更改一遍。有人会想写在一个组件内，通过不同的属性来区分不同的情况，但这时候属性一多又容易混乱。在 Vue 的官方文档中提出了 是一种非常灵活的方式 mixin，如果被正确使用，可以帮助我们解决上面的困惑。今天我们会介绍一下 mixin 并学习如何在 vue 中使用 mixin。 如果您是vue 大牛并且已经掌握了该属性，那么您可以跳过此文或者继续往下看给我们提供宝贵的意见，如果您对该属性还不是很了解，那么您可以继续往下看，希望以下内容能帮助您认识、了解 vue 的mixin。
基础：认识 mixin
从官网文档入手，mixin（混入） 提供了一种灵活的方式，可以分发Vue 组件中的可复用功能。而混入对象可以包含任意组件选项，选项中可以包含vue 的各种生命周期的钩子函数，也可以是 data，methods等等。我们可以首先定义混入对象，当组件使用了混入对象时，混入对象的所有选项将被混合进入该组件本身的选项中。下面我们举例子更为清晰地说明什么是混入对象，组件如何使用混入对象的。
// 定义一个混入对象
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!"
如上面代码模块所示，1-11 行代码首先定义了一个混入对象，该混入对象中具有created 钩子函数和 methods 对象。后面14-26行代码中定义了一个使用了 muMixin 混入对象的组件。那么了解了什么是混入对象，组件是怎么使用混入对象的。我们接接下来看一看组件使用了混入对象后，选项合并是怎么样的。
我们上面提到混入对象的选项可以包含组件任意组件选项，可以是各种生命周期的钩子函数，可以是 data、methods、component，也可以是directive 等等。当组件使用了混入对象时，混入对象的所有选项将被混合进入该组件本身的选项中。对于同名的生命周期的钩子函数，将会被合并为一个数组，执行会先调用混入对象的钩子函数再调用组件本身的钩子函数。对于 data 对象，会进行合并，当混入对象和组件的data 中含有同名的数据时，将以组件的数据优先。同样，对于 methods、components 和 directives 等这些使用健值为对象的选项，会被合并为 一个对象，当混入对象和组件含有相同健名时，将保留使用组件的键值对。下面我们使用一段代码的执行结果来帮我们更为清晰地理解。
var mixin = {
data: function () {
return {
message: 'hello',
mixinData: 'abc'
}
}，
created: function () {
console.log('hello,begain use mixin')
}，
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
barData: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", mixinData: "abc", barData: "def" }
}
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
上面的代码模块示例中，混入对象mixin 具有 data 和 methods 选项，当进入 vm 组件的时候，组件会首先执行混入对象的create 钩子函数，打印出 ‘hello,begain use mixin’，然后再执行组件的create 钩子函数，打印出 data 值，同时，因为组件的data 属性值有与混入对象中的data 对象属性值相同的，因此会保留组件自身带有的data 对象属性值，所以打印出的的内容为 “{ message: "goodbye", mixinData: "abc", barData: "def" }”。同理，对于 methods 对象，当混入对象和组件同时含有conflicting 函数时，会保留组件本身自己的conflicting 函数，因为 vm.conflicting() 时输出的是 "from self"。
mixin 应用
在讨论 mixin 的应用前，我们先来了解一下mixin 的特点，避免对mixin 的使用有错误理解。mixin 是在组件引入混入对象后，将组件内的选项进行合并，是在原有组件上进行扩充成一个新的组件。不同于引用组件，父亲组件和子组件本质上还是相对独立的两块空间。只不过在父亲组件引用子组件时，父组件会开辟一个空间给予子组件，父组件与子组件之前通过props 进行数据交流。所以mixin的一个特点是父组件引入混入对象后在父组件原有基础上将父组件更新为一个新的组件。mixin 的另外一个特点是方法和参数在不同组件间是不共享的，即指向的空间是不同的。有不少同学会误认为，A 组件 引入了 C 混入对象，B 组件引入了 C 混入对象，那么 A 组件中改变了 C 混入对象注入的data 属性值，B 组件中的注入的相同值也可以改变。真实的情况如下：
// 定义一个混入对象
var myMixin = {
data: function () {
return {
message: 'hello',
}
}
}
// 定义一个使用混入对象的组件
var vm1 = new Vue({
mixins: [myMixin],
methods: {
bar: function () {
console.log(this.message)
// => "hello"
}
}
})
var vm2 = new Vue({
mixins: [myMixin],
created: function () {
this.message = 'fine'
}
methods: {
bar: function () {
console.log(this.message)
// => "fine"
}
}
})
如上，组件 vm2 和组件 vm1 都引用了混入对象 myMixin，vm2 在created 的时候改变了 混入的data 属性值，我们可以看到最终改变的是vm2 本身的 message 值，vm1 的 message 值仍然是"hello"。
基于以上两个特点，我们知道组件引入混入对象，不需要通过props 进行组件和混入对象的数据沟通。同时，我们也不能误以为可以通过mixin 来进行组件间的数据沟通。
了解了上面两个特点之后，我们再来继续讨论一下 mixin 适合用在什么时候呢？就如一开始提到的一样，如果你要实现的组件，带有相同的功能时。当多个组件重复调用一个方法或者一个变量时，使用 mixin 可以避免重复写相同的方法。我们举一个很简单的例子，我们在开发后台时会经常遇到下载文件按钮，里面的部分页面（假设10个页面）有下载文件按钮，而其中部分（假设5个）页面有默认下载文件链接，另一部分页面（假设5个）有自己单独的下载文件链接。下载文件时他们的需要先判断用户的权限，权限通过才允许下载。这种时候您就可以使用mixin来解决当前的问题，不必每个页面都写一段下载逻辑。下面我们通过代码来演示一遍。
1、首先新建文件 download.js, 定义混入对象，在混入对象中定义默认的下载链接和下载逻辑
export default {
data () {
return {
downloadUrl: 'http://downloadUrl/default/'
}
},
methods: {
downloadClick: function () {
console.log('下载链接是', this.downloadUrl)
// 下载的业务逻辑
}
}
}
2、在直接使用默认逻辑的组件中直接注入混入对象
<template>
<div id='default'>
<button @click="downloadClick">下载文件</button>
</div>
</template>
<script>
import downloadButton from './download'
export default{
name: 'default',
mixins: [downloadButton],
}
</script>
此时组件中注入了混入对象，可以直接调用 downloadClick ，点击按钮时会执行 downloadClick 的逻辑，打印内容是 'http://downloadUrl/default/'。
3、对于需要有特殊下载链接的组件，引入混入对象，并且定义自己的下载文件链接。
<template>
<div id='myself'>
<button @click="downloadClick">下载文件</button>
</div>
</template>
<script>
import downloadButton from './download'
export default{
name: 'myself',
mixins: [downloadButton],
data () {
return {
downloadUrl: 'http://downloadUrl/myself/',
}
}
},
}
</script>
此时组件中注入了混入对象，可以直接调用 downloadClick ，点击按钮时会执行 downloadClick 的逻辑，因为组件自己定义了data 的 downloadUrl，所以混入时会保留组件自己的downloadUrl值， 打印内容是 'http://downloadUrl/myself/'
以上，就是mixin 可以在日常开发中的简单应用。日常开发中还有很多类似的场景，例如各类弹窗组件的开启和关闭功能，大家可以使用mixin 减少代码的冗余。
总结：
本文主要是讨论了 vue 中 mixin，介绍了mixin的选项合并，以及如何使用和应用mixin。认真看到最后的同学，希望您可以看懂。另外我在参考其他同学的时候，看到有不少人对vue 的mixin 的设计提出了质疑，后续我们不妨一起继续探讨一下mixin 的设计原理。
