vue之mixin的理解与使用

一、概念

混入 (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混入对象的同名对象进行覆盖。