Vue中mixin混入的使用

mixin混入

mixin定义

1. 将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可
   1. 可以减少代码冗余度
   2. 后期维护更加容易
2. 是一个对象，对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等

mixin和Vuex的区别

• Vuex公共状态管理：如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化
• mixin：数据和方法都是独立的，组件之间使用后是互相不影响的

mixin的使用

新建mixin混入文件

1. 新建一个命名为mixin.js的文件（文件名任意），在其中定义一个对象，在对象中配置data、methods、created等属性与生命周期钩子，最后将对象导出
2. 如下：

   export default const mixin = {
       data () { ... },
       created () { ... },
       methods: { ... }
   }
   

使用mixin混入

全局混入

1. 在main.js中引入mixin.js文件

   import mixin from '...mixin.js'
   

2. 全局使用mixin混入

   Vue.mixin(mixin)
   

局部混入

1. 在需要使用mixin混入的组件中引入mixin.js

   import mixin from '...mixin.js'
   

2. 组件内使用mixin混入，配置mixins属性，属性值为数组，数组值为引入的mixin

   mixins: [ mixin ]
   

mixin的优先级

1. mixin的优先级主要分以下三种情况：
   1. 对于created，mounted等生命周期函数 mixin.js文件中的代码先执行，组件中的后执行
   2. 对于data中定义的字段：
      1. mixin.js和组件中均重复定义：组件中定义组件覆盖mixin中同名字段
      2. mixin.js中定义，而组件中未定义：整合mixin.js中定义的data数据和组件中的data数据到一起
   3. method中的同名方法：组件内的同名方法覆盖mixin中的方法

mixin的优缺点

优点

• 提高代码复用性
• 无需传递状态
• 维护方便，只需要修改一个地方即可

缺点

• 容易出现命名冲突问题
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦