vue 2 中 mixins 实现跨组件逻辑复用，通过导出含 data、methods 等选项的对象，在组件中以 mixins 数组引入，按声明顺序合并（后置优先），生命周期钩子叠加执行，同名方法/计算属性以组件自身为准。
Vue 2 中通过 mixins 选项实现跨组件逻辑复用，核心是把通用功能（如请求、校验、日志）抽成独立对象，再在多个组件中声明引入。它不依赖父子关系，也不需要 props 或事件传递，直接“注入”到组件选项层，天然适合横向复用。
如何定义和注册 mixin
一个 mixin 是普通 JS 对象，可导出为模块：
- 包含标准组件选项：data、methods、computed、watch、生命周期钩子等
- 推荐用
export default导出，便于按需导入 - 支持局部混入（单个组件）和全局混入（所有组件，慎用）
示例（apiMixin.js）：
export default {
data() {
return {
loading: false,
error: null
}
},
methods: {
fetchWithLoading(url) {
this.loading = true
return fetch(url)
.then(res => res.json())
.catch(err => { this.error = err })
.finally(() => { this.loading = false })
}
}
}
在组件中使用 mixins 数组
组件通过 mixins: [] 声明一个或多个 mixin，顺序决定合并优先级（后声明的 mixin 优先级更高，但低于组件自身）：
- 多个 mixin 可同时引入：
mixins: [apiMixin, formMixin, logMixin] - 可在 Vue.extend 创建的构造器中使用，也可在单文件组件
export default中使用 - 引入后，mixin 中的
data、methods等直接挂载到组件实例上，无需前缀即可调用
示例：
import apiMixin from './apiMixin'
export default {
name: 'UserList',
mixins: [apiMixin],
created() {
this.fetchWithLoading('/api/users') // 直接使用 mixin 方法
}
}
理解合并规则，避免静默覆盖
同名选项不会报错，但行为固定，必须清楚每类选项如何合并：
- data：函数返回对象，浅合并；同名 key 以组件 data 为准
- methods / computed / watch：同名属性完全被组件定义覆盖，mixin 中的逻辑丢失
- 生命周期钩子（created、mounted 等）：叠加执行，mixin 钩子先于组件自身钩子调用
-
自定义选项（如 apiConfig、rules）：默认不合并，需手动配置
Vue.config.optionMergeStrategies
实用建议：让 mixin 更可靠、易维护
命名冲突和逻辑污染是 mixin 最大风险，预防比补救更有效：
- 为 mixin 内部成员加语义化前缀，如
apiLoading、formValidate、logTrack - 把相关状态组织进嵌套对象，如
data() { return { api: { loading: false } } }，调用时写this.api.loading - 避免宽泛名称（
init、state、handleClick），改用带上下文的名称（tableInit、searchSubmit） - 高复用逻辑可逐步迁移到纯函数 + Composition 风格封装，例如
useApi()，即使 Vue 2 项目也可借助@vue/composition-api插件支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
