Vue 2 中 mixins 通过选项合并复用逻辑，将 data、methods 等封装为对象并在组件中以数组引入；支持多混入、局部生效；同名选项按规则合并，适合登录校验、分页、错误提示等高耦合复用场景。
Vue 2 中通过 mixins 选项复用公共逻辑，核心是把可共享的 data、methods、生命周期钩子等封装成独立对象，再在需要的组件中以数组形式引入。它不是继承也不是父子通信，而是“选项合并”——把 mixin 的内容直接融入组件自身配置里。
怎么定义一个混入对象
混入本质就是一个普通 JavaScript 对象，导出后供组件引用：
- 可以放在单独文件中（如
src/mixins/apiHelper.js），用export default导出 - 对象内支持
data、methods、computed、watch、生命周期钩子等任意组件选项 - 避免使用箭头函数定义
data或钩子，否则this指向会出错
怎么在组件中使用 mixins
在组件的 export default 配置中，添加 mixins: [xxx] 数组：
- 支持同时混入多个，比如
mixins: [authMixin, loadingMixin, errorMixin] - 局部混入只影响当前组件，不会污染其他组件
- 引入后，组件可直接访问 mixin 中的
data属性、调用methods方法，无需前缀或解构
冲突时怎么处理
当组件和 mixin 定义了同名选项，Vue 有明确合并规则：
立即学习“前端免费学习笔记（深入）”；
- data 字段：组件中的值覆盖 mixin 中的同名字段（但 mixin 的其他字段仍保留）
- methods / computed / watch：组件内的同名方法会完全替换 mixin 中的
-
生命周期钩子（如
created、mounted）：两者都会执行，且 mixin 的先运行 -
值为对象的选项（如
components、directives）：键名不冲突则合并，冲突时组件优先
什么情况下适合用 mixins
适合解决“多处重复、逻辑耦合紧、不需跨组件通信”的场景：
- 登录态校验 + token 自动刷新逻辑
- 列表页通用分页、搜索、重置行为
- 错误提示统一弹窗 + 错误码映射
- 页面级 loading 状态管理（配合
v-loading或自定义指令）
