mixin混入
mixin定义
- 将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可
- 可以减少代码冗余度
- 后期维护更加容易
- 是一个对象,对象里面可以包含Vue组件中的一些常见配置,如data、methods、created等
mixin和Vuex的区别
- Vuex公共状态管理:如果在一个组件中更改了Vuex中的某个数据,那么其它所有引用了Vuex中该数据的组件也会跟着变化
- mixin:数据和方法都是独立的,组件之间使用后是互相不影响的
mixin的使用
新建mixin混入文件
- 新建一个命名为mixin.js的文件(文件名任意),在其中定义一个对象,在对象中配置data、methods、created等属性与生命周期钩子,最后将对象导出
- 如下:
export default const mixin = { data () { ... }, created () { ... }, methods: { ... } }
使用mixin混入
全局混入
- 在main.js中引入mixin.js文件
import mixin from '...mixin.js'
- 全局使用mixin混入
Vue.mixin(mixin)
局部混入
-
在需要使用mixin混入的组件中引入mixin.js
import mixin from '...mixin.js'
-
组件内使用mixin混入,配置mixins属性,属性值为数组,数组值为引入的mixin
mixins: [ mixin ]
mixin的优先级
- mixin的优先级主要分以下三种情况:
- 对于created,mounted等生命周期函数 mixin.js文件中的代码先执行,组件中的后执行
- 对于data中定义的字段:
- mixin.js和组件中均重复定义:组件中定义组件覆盖mixin中同名字段
- mixin.js中定义,而组件中未定义:整合mixin.js中定义的data数据和组件中的data数据到一起
- method中的同名方法:组件内的同名方法覆盖mixin中的方法
mixin的优缺点
优点
- 提高代码复用性
- 无需传递状态
- 维护方便,只需要修改一个地方即可
缺点
- 容易出现命名冲突问题
- 滥用的话后期很难维护
- 不好追溯源,排查问题稍显麻烦