在vue的官方文档是这样解释的：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。简单的理解就是它可以制作一个可以复用的功能，可以复用到各个组件中，同时呢这个mixin功能可以使用vue组件里任意组件选项，比如data，method，watch，和各个生命周期函数。当需要运用的组件，引用它时，相当于把mixin的各个组件选项合并到引用的组件中。
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" }
}
})
我们可以看到，钩子函数created所打印的数据也包含有对象mixin data里的数据。
项目中的运用
项目中我们可以创建一个mixins的文件夹，文件里有我们需要运用的mixin功能文件
image.png
在需要运用的组件里引用我们需要的mixins文件
<script>
import toggle from "@/components/mixins/toggle.js";
export default {
mixins: [toggle],
}
</script>
这样我们就可以复用toggle.js里的toggleShow方法了。
使用场景
给项目添加可以复用的功能，有很多方法，那我们应该在什么使用运用vue mixin功能呢？我的理解是如果一个功能需要运用vue 组件里的组件选项，比如data，computed，以及各种钩子函数的时候，用mixin是首选。
