通过Mixin混入,将公共的逻辑抽离并封装,优雅地组织你的代码结构!
1. 作用
- 可以把公共的逻辑抽离,进行统一封装
- 可以在不破坏原代码的情况下,新增逻辑,供多个组件实例使用
2. 写法
1)局部混入
在组件实例中的每一个配置项,都可以写在 mixin
混合中
// mixin.js
export const mixin = {
methods: { ... },
data() { ... },
computed() { ... },
mounted() { ... },
....
}
// xx.vue
import { mixin } from './mixin.js'
export default {
mixins: [mixin]
}
2)全局混入
全局混入后,所有
的组件实例身上都将拥有 mixin
中的配置项
// mixin.js
export const myMixin = {
methods: { ... },
data() { ... },
computed() { ... },
mounted() { ... },
....
}
// main.js
import { myMixin } from './mixin'
Vue.mixin(myMixin)
3. 备注
1)假设:组件实例中已拥有某个配置项,再通过mixin混入后,其优先级如下:
- 非生命周期函数:
组件优先
(如data、method
等) - 生命周期函数:两者中的回调都会保留,先执行
mixin
里的逻辑,再执行组件
里的逻辑(如created、mounted
等,如下代码打印顺序为1 -> 2
)
// mixin.js
export const myMixin = {
mounted() {
console.log(1)
}
}
// xx.vue
import { myMixin } from './mixin.js'
export default {
mixins: [myMixin],
mounted() {
console.log(2)
}
}
4. 总结
- 局部混入:通过配置项的
mixin: [myMixin]
配置 - 全局混入:通过
Vue.mixin(myMixin)
配置