Mixin是Vue 2中通过对象混入实现逻辑复用的设计模式，支持data、methods等选项合并，但易引发命名冲突与隐式依赖；Vue 3已弃用，推荐使用更清晰可控的Composition API。
Mixin 是一种在 JavaScript（尤其是 Vue 2 中）实现组件逻辑复用的模式，本质是把一组可复用的数据、方法、生命周期钩子等“混入”到多个组件中，避免重复写相同代码。它不是语法特性，而是一种设计思想；Vue 3 已不推荐使用（改用 Composition API），但在维护老项目或理解设计思路时仍需掌握。
Mixin 的基本写法和作用
你可以定义一个普通 JS 对象，里面包含 data、methods、created 等选项，然后通过 mixins: [myMixin] 注入到组件中。Vue 会自动合并这些选项：
- data 中的属性会被浅合并，同名字段以组件自身为准（Mixin 的值被覆盖）
- methods、computed、watch 等同名函数会被保留两个，但执行顺序是：Mixin 先于组件自身（比如 created 钩子，Mixin 的先触发）
- 生命周期钩子会全部执行，不会覆盖
典型使用场景举例
比如多个页面都需要“加载状态 + 错误提示 + 重试逻辑”，就可以抽成一个 mixin：
- 封装 loading、error、retry 方法
- 统一处理 API 请求失败的 toast 提示
- 在 mounted 中自动调用 fetch 数据的方法（如果组件提供了 load 方法）
这样每个组件只需引入 mixin，再定义自己的 load 方法，就自动拥有了整套加载流程。
立即学习“Java免费学习笔记（深入）”；
Mixin 的隐患和注意事项
它容易引发隐式依赖和命名冲突：
- 组件和 mixin 里都定义了同名 method，后者可能被意外覆盖
- 多个 mixin 之间也可能互相干扰（比如都修改了同一 data 字段）
- 逻辑来源不直观，调试时难定位某段行为来自哪个 mixin
- Vue 3 废弃 mixin 正是因为组合式 API 更清晰、更可控
现代替代方案：Composition API（Vue 3 推荐）
用 composable 函数代替 mixin，例如：
- 写一个 useLoading()，返回 { loading, start, end }
- 在 setup 中直接解构调用，逻辑归属明确、可按需引入、支持 TS 类型推导
- 没有合并规则，没有隐式行为，更易测试和复用
本质上，composable 就是函数式 mixin，但更透明、更安全。
基本上就这些。Mixin 不复杂但容易忽略副作用，新项目建议直接上 Composition API，老项目维护时读懂 mixin 逻辑即可。
