[JavaScript知识库]【Vue | 补洞 | 11】Mixin混入

通过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) 配置