前端Wiki/词条/mixin 混入

mixin 混入

定义把可复用的组件选项抽取成混合对象，分发给多个组件复用的老办法

mixin 允许把组件里重复的 data、methods、生命周期钩子抽成一个独立对象，任何组件引入后这些选项就会被混入。在选项式 API 时代它是逻辑复用的主力：权限校验、打开关闭弹窗这类横切逻辑抽成 mixin 后，多个组件一行引入即可获得相同能力。

mixin 的缺陷同样著名：混入的选项与组件自身的同名字段按规则合并，data 对象会递归合并、生命周期钩子全部执行，发生冲突时到底哪个生效全凭合并策略，调试起来很难追。Vue 3 推崇组合式函数替代 mixin，新项目应优先使用来源清晰、可 tree-shaking 的 composable 写法。

mixin 与组件同名 data 递归合并，钩子则全部依次执行
命名冲突时行为隐晦，团队协作时容易踩坑
新项目用组合式函数替代 mixin，类型与来源都更清晰

JavaScript

// counterMixins.js
export const counterMixin = {
  data() { return { count: 0 }; },
  methods: { add() { this.count++; } },
  mounted() { console.log('混入的钩子也会执行'); }
};

// 组件中使用
import { counterMixin } from './counterMixins.js';
export default { mixins: [counterMixin] };

⚠ 常见误区

以为 mixin 只有自己用到，实际全局引入后到处都是副作用
组件与 mixin 定义同名方法，合并后哪个生效傻傻分不清
Vue 3 项目仍执意用 mixin 而不转向组合式函数

🔗 相关词条组合式函数 composables 生命周期