Vue-Vue.mixin

# Vue-Vue.mixin

# mixin 是什么

mixin 用来把一组可复用的选项对象注入到组件里。它适合抽离生命周期、方法和局部配置,但本质上仍然是“选项合并”,不是作用域隔离。

# 合并规则

  • data:对象合并,组件自身优先级更高。
  • 生命周期:都会执行,mixin 先执行,组件后执行。
  • methods、computed、components:同名时组件覆盖 mixin。

# 适用场景

  • 多个页面共享埋点、权限校验、初始化逻辑。
  • 提取一些通用的生命周期副作用。
  • 给业务组件补统一的方法集合。

# 常见问题

  • 来源不清晰,阅读组件时很难知道字段从哪里来的。
  • 命名冲突隐蔽,同名方法容易被覆盖。
  • 多个 mixin 叠加后,排查问题成本很高。

# 更推荐的替代方式

  • Vue 2 可以优先考虑普通工具函数或高阶组件思想。
  • Vue 3 更推荐组合式函数,把依赖关系显式写出来。

# 结论

mixin 不是不能用,而是不适合滥用。共享逻辑一旦复杂,最好换成更显式的组织方式。

Last Updated: 9/25/2026, 2:08:32 PM