什么是 Vue 的 mixin?
Mixin(混入)是 Vue.js 中一种分发组件可复用功能的方式。它允许你将多个组件共用的数据、计算属性、方法、生命周期钩子等抽取成一个独立的对象,然后混入到多个组件中使用。
当组件和 mixin 有同名选项时,Vue 有特定的合并规则:
| 选项类型 | 合并策略 | 示例 |
|---|---|---|
| data 函数 | 合并,冲突时以组件优先 | 同名 key,组件覆盖 mixin |
| methods / computed | 合并,冲突时以组件优先 | 同名方法,组件覆盖 mixin |
| 生命周期钩子 | 合并为数组,全部执行,mixin 的优先执行 | created、mounted 等都会执行 |
| components / directives | 合并,冲突时以组件优先 | 同名组件,组件覆盖 mixin |
全局混入会影响每一个 Vue 实例,务必谨慎使用,通常只用于插件开发或全局日志、埋点等场景。
Vue 3 仍然支持 mixin(为了兼容性),但官方推荐使用 Composition API 作为替代。
浙公网安备 33010602011771号