Vue2组件混入如何通过 mixins 选项复用组件间的公共逻辑

Vue 2 中 mixins 通过选项合并复用逻辑，将 data、methods 等封装为对象并在组件中以数组引入；支持多混入、局部生效；同名选项按规则合并，适合登录校验、分页、错误提示等高耦合复用场景。

Vue 2 中通过 mixins 选项复用公共逻辑，核心是把可共享的 data、methods、生命周期钩子等封装成独立对象，再在需要的组件中以数组形式引入。它不是继承也不是父子通信，而是“选项合并”——把 mixin 的内容直接融入组件自身配置里。

怎么定义一个混入对象

混入本质就是一个普通 JavaScript 对象，导出后供组件引用：

1. 可以放在单独文件中（如 src/mixins/apiHelper.js），用 export default 导出
2. 对象内支持 data、methods、computed、watch、生命周期钩子等任意组件选项
3. 避免使用箭头函数定义 data 或钩子，否则 this 指向会出错

怎么在组件中使用 mixins

在组件的 export default 配置中，添加 mixins: [xxx] 数组：

1. 支持同时混入多个，比如 mixins: [authMixin, loadingMixin, errorMixin]
2. 局部混入只影响当前组件，不会污染其他组件
3. 引入后，组件可直接访问 mixin 中的 data 属性、调用 methods 方法，无需前缀或解构

冲突时怎么处理

当组件和 mixin 定义了同名选项，Vue 有明确合并规则：

1. data 字段：组件中的值覆盖 mixin 中的同名字段（但 mixin 的其他字段仍保留）
2. methods / computed / watch：组件内的同名方法会完全替换 mixin 中的
3. 生命周期钩子（如 created、mounted）：两者都会执行，且 mixin 的先运行
4. 值为对象的选项（如 components、directives）：键名不冲突则合并，冲突时组件优先

什么情况下适合用 mixins

适合解决“多处重复、逻辑耦合紧、不需跨组件通信”的场景：

1. 登录态校验 + token 自动刷新逻辑
2. 列表页通用分页、搜索、重置行为
3. 错误提示统一弹窗 + 错误码映射
4. 页面级 loading 状态管理（配合 v-loading 或自定义指令）