mixins 中 data 必须为函数并返回对象，与组件 data 浅合并；computed 对象属性被合并进组件，同名时组件版本覆盖 mixin 版本，建议加前缀避免冲突。
在 Options API 中，mixins 是组织和复用公共逻辑的常用方式。要让多个组件共享计算属性（computed）和数据状态（data），关键在于正确声明 mixin 对象，并理解 Vue 的合并规则。
如何在 mixin 中定义 data 和 computed
mixins 本质是普通 JS 对象，可直接包含 data 函数和 computed 对象：
-
data 必须是函数，返回一个对象；Vue 会将其返回值与组件的
data()返回值做浅合并（Object.assign），同名字段以组件自身数据为准 -
computed 是对象，其每个属性会被合并进组件的
computed；若名字冲突，组件中定义的计算属性会完全覆盖 mixin 中的版本，无警告
示例 mixin：
export const sharedState = {
data() {
return {
isLoading: false,
error: null,
sharedCount: 0
}
},
computed: {
isReady() {
return !this.isLoading && !this.error
},
formattedCount() {
return `当前数量：${this.sharedCount}`
}
}
}
在组件中使用并注意命名冲突
引入后，这些状态和计算属性即可在模板或方法中直接使用，但需警惕覆盖风险：
- 若组件也定义了
data() { return { sharedCount: 100 } }，则最终this.sharedCount值为100，mixin 中的0被静默丢弃 - 若组件也写了
computed: { isReady() { return true } }，则无论 mixin 是否定义，调用this.isReady都只执行组件版本 - 建议对 mixin 提供的属性/计算属性加前缀（如
mixIsReady、mixSharedCount），降低意外覆盖概率
生命周期与响应式联动技巧
单纯共享 data 和 computed 往往不够，常需配合生命周期或 watch 实现初始化或联动：
- 可在 mixin 中定义
created()或mounted()来自动触发加载逻辑，比如设置this.isLoading = true - 用
watch监听共享数据变化，例如监听sharedCount并触发日志或上报 - 所有 mixin 的钩子会先于组件自身钩子执行，适合做前置准备（如权限检查、状态预设）
不推荐全局混入，优先按需导入
虽然 Vue 3 仍支持 app.mixin()，但已不推荐：
- 全局混入影响所有组件，容易引发隐式依赖和调试困难
- 无法按需 tree-shaking，增加包体积
- 应改为局部导入：在需要的组件中显式写
mixins: [sharedState]，清晰可控
