有一种很常见的情况：有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢?还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢?
两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 dry
原则。反之，太多的props传值会很快变得混乱不堪，从而迫使维护者(即便这个人是你)在使用组件的时候必须理解一大段的上下文，拖慢写码速度。
使用mixin。vue 中的mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解(引自
michael feathers
)。mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大!
基础实例
我们有一对不同的组件，它们的作用是通过切换状态(boolean类型)来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。
// 模态框
const modal = {
template: '#modal',
data() {
return {
isshowing: false
}
},
methods: {
toggleshow() {
this.isshowing = !this.isshowing;
components: {
appchild: child
}
}
// 提示框
const tooltip = {
template: '#tooltip',
}
我们可以在这里提取逻辑并创建可以被重用的项：
const toggle = {
mixins: [toggle],
};
};
你可以点击这里，查看 sarah drasner(@sdras) 在codepen上编写 mixin 的例子
为了更容易理解mixin，这个例子故意编写得简单一些。真实应用中mixin有如下的应用，但是它的作用也不仅限于此：获取视窗和组件的尺寸，采集特定的鼠标事件和图表的基本元素。paul
pflugradt 有一个关于 vue mixins 的优秀项目，值得一提的是它是用 coffeescript 编写的。
用法
上面这个codepen的例子并没有告诉我们在一个真实的应用中如何使用mixin，所以我们看看下面的这个。
你可以按照你喜欢的任意方式设置你的目录结构，但为了结构规整我喜欢新建一个mixin目录。我们创建的这个文件含有.js扩展名(跟.vue相对，就像我们的其他文件)，为了使用mixin我们需要输出一个对象。
接着我们可以在modal.vue使用这样的写法，来引入这个mixin:
import child from './child'
import { toggle } from './mixins/toggle'
export default {
name: 'modal',
即便我们使用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的，理解这点很重要。我们也可以这里使用mounted()钩子函数，它将被应用于组件的生命周期上。这种工作方式真的很灵活也很强大。
合并
在下面的这个例子，我们可以看到，我们不仅仅是实现了自己想要的功能，并且mixin中的生命周期的钩子也同样是可用的。因此，当我们在组件上应用mixin的时候，有可能组件与mixin中都定义了相同的生命周期钩子，这时候钩子的执行顺序的问题凸显了出来。默认mixin上会首先被注册，组件上的接着注册，这样我们就可以在组件中按需要重写mixin中的语句。组件拥有最终发言权。当发生冲突并且这个组件就不得不“决定”哪个胜出的时候，这一点就显得特别重要，否则，所有的东西都被放在一个数组当中执行，mixin将要被先推入数组，其次才是组件。
//mixin
const hi = {
mounted() {
console.log('hello from mixin!')
//vue instance or component
new vue({
el: '#app',
mixins: [hi],
console.log('hello from vue instance!')
});
//output in console
> hello from mixin!
> hello from vue instance!
如果这两个冲突了，我们看看 vue实例或组件是如何决定输赢的：
sayhello: function() {
console.log('hello from mixin!')
this.sayhello()
console.log('hello from vue instance!')
})
// output in console
> hello from vue instance!
你可能已经注意到这有两个console.log而不是一个——这是因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayhello()函数。
全局mixin
当我们使用“全局”来描述mixin的时候，我们并不是说mixin能够像filter，在每个组件都能被访问到。只是我们能够在组件通过mixins:[toggle]访问组件上的mixin对象。
全局mixin被注册到了每个单一组件上。因此，它们的使用场景极其有限并且在使用的时候我们需要非常小心。一个我能想到的用途就是类似于插件，你需要赋予它访问所有东西的权限。但即使在这种情况下，我也对你正在做事情的充满警惕，尤其当你打算为应用增加通能的时候，这样做可能对你来说是个潘多拉的盒子。
为了创建一个全局实例，我们可以把它放在vue实例之上。在一个典型的 vue-cli 初始化的项目中，它可能在你的main.js文件中。
vue.mixin({
...
})
再次提醒，小心使用它!那个console.log将会出现在每个组件上，在这个案例里还不算坏(除了控制台上有多余的输出)。但如果全局mixin被错误的使用，你将能看到它有多可怕。
结论
mixin对于封装一小段想要复用的代码来讲是有用的。对你来说mixin当然不是唯一可行的选择：比如说高阶组件就允许你组合相似函数，mixin只是的一种实现方式。我喜欢mixin，因为我不需要传递状态，但是这种模式当然也可能会被滥用，所以，仔细思考下哪种选择对你的应用最有意义吧!
作者：佚名
来源：51cto