1、什么是mixins？
在开发中有这么一种情况，当你有两个非常相似的组件，它们的功能极其相似，但它们局部稍有不同，现在你的做法是将它们分成两个不同的组件？还是只保留一个组件，局部差异的部分采用props控制呢？
这些解决方案都不是完美的，如果将它们拆分为两个不同的组件，这时功能发生变化，那么必须在两个地方修改它们，而且这种方式也违背了DRY原则（Don’t Repeat Yourself）。如果采用过多的props控制组件的差异，这种维护起来将会很复杂，可能减慢你开发的速度。
DRY原则：Don't repeat yourself (DRY, or sometimes do not repeat yourself)
is a principle of software development aimed at reducing repetition of
software patterns,[1] replacing it with abstractions or using data
normalization to avoid redundancy.
Vue中的Mixins基本上是一块定义的逻辑，由Vue以特定的规定方式存储，可以反复使用，为Vue实例和组件添加功能。因此，Vue mixins可以在多个Vue组件之间共享，而无需重复代码块。使用过SASS的CSS预处理器的人对mixin应该有很好的了解。
2、mixins为什么重要？
- 使用Vue mixins，您可以轻松地在编程中遵循DRY原则，这可以确保您不会重复自己。
- 使用Vue mixins，您还可以获得灵活的选择，mixin对象包含Vue组件的选项，因此混合了mixin和组件选项。
- Vue mixins也是安全的，如果写得好，它们不会影响超出其定义范围的变化。
- 它们是代码可重用性的绝佳平台。
3、mixins实例
合并规则：
- 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
- 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
3.1、局部mixins
//toggle.js
export const toggle = {
data() {
return {
"show": false
}
},
methods: {
changeState() {
this.show = !this.show;
}
}
};<template>
<div>
<div v-show="show">
<p>提示框</p>
</div>
<button @click="changeState">click</button>
</div>
</template>
<script>
import {toggle} from './mixins/toggle'
export default {
mixins: [toggle]
}
</script>运行结果：
3.2、全局mixins
<script>
import vue from 'vue'
vue.mixin({
created() {
//自定义选项
const myOption = this.$options.myOption;
if (myOption) {
//如果myOption有值则打印
console.log(myOption);
}
}
})
export default {
myOption: "hello world!"
}
</script>注意：请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
4、总结
我们在此处提到的所有内容在构建可能会增加复杂性的应用程序时都会派上用场。您希望定义许多可重用的函数，或者以可以跨组件重用的方式对它们进行格式化，因此您不必一遍又一遍地定义相同的内容。