vue - mixin混入

1. mixin概念

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项,data、components、methods 、created、computed等等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件使用了mixin时, mixin中的生命周期函数会先执行,然后在执行组件中的生命周期;

2. 适用场景

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。
作用： 减少data、methods、钩子函数等的重复

3. 代码示例

代码示例

4. 混入方式

1. 自定义混入的方式如上代码示例; 开发者可以根据自己的需要定义不同的模块,按需引入;

2. 全局混入

   
   
   代码示例

• 全局注册之后会对所有组件都生效，影响比较大, 建议合理使用;

5. mixin 选项合并的方式

1. mixin 中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;
2. mixin中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的methods,created等选项合并调用;
3. mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据
4. 如果同时引入多个mixin对象, 执行顺序和引入顺序一致;

6. mixin 和 vuex及封装公共组件的区别

1. 与vuex的区别: vuex用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。而mixin中定义的值,也可以在任意组件中进行修改, 但其他组件的值并不会因此受到影响;(mixin中定义的数据在各个组件中相互独立)
2. 与公用组件的区别: 在组件中引入公共组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的, 但vue不建议修改父组件传递的值; 而在组件中直接引入mixin之后, 是可以对mixin中的数据进行修改的, 组件中引入mixin本质上是对组件的扩展,从而形成一个新的组件;

参考文档

官网
Vue — 详解mixins混入使用，应用场景