一、概念
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
二、应用场景
针对一些基本功能一样，但又存在足够差异性的组件之间，有两种解决方案：
（1）一种是拆分成公共组件，但是这种方式一旦功能变动就要在引入的文件中更新代码，这违背了DRY原则，反之，太多的props传值会很快变得混乱，导致项目维护难度增加。
（2）另一种是使用Mixin，Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大！
三、基础使用
（1）常规操作先建一个mixin文件夹，然后定义一个 js 文件(mixin.js), 为了使用Mixin我们需要输出一个对象。
export default {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: {}
}
多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。
（2）在Modal.vue中引入这个Mixin:
import Child from './Child'
import toggle from './mixins/toggle'
export default {
name: 'modal',
mixins: [toggle],
components: {
appChild: Child
}
}
即便我们使用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的，理解这点很重要。我们也可以这里使用mounted()钩子函数，它将被应用于组件的生命周期上。这种工作方式真的很灵活也很强大。
mixin混入对象和Vuex的区别：
（1）Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；
（2）mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
（3）mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
（4）mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖。
网友评论