Vue Options API 中 mixin 的合并规则为：data 递归合并（组件覆盖混入同名字段）、生命周期钩子拼接执行（混入先于组件）、methods/computed/props 等浅合并（组件覆盖混入同名键）、components/directives/filters 同样组件优先。

Vue Options API 中使用 mixin 实现逻辑混入，关键在于理解其合并规则并按需组织选项。混入不是简单叠加，而是 Vue 内部调用 mergeOptions 对各类选项进行有策略的整合，不同类型的选项遵循不同优先级和执行顺序。

data 函数：递归合并，组件数据覆盖混入同名字段

mixins 中的 data 是函数，返回对象；组件自身的 data 也是函数。Vue 会分别执行两者，再将返回的对象递归合并——若字段名冲突，组件 data 的值生效。

• 混入定义：data() { return { count: 0, status: 'idle' } }
• 组件定义：data() { return { count: 100, loading: true } }
• 最终结果：{ count: 100, status: 'idle', loading: true }

生命周期钩子：拼接执行，混入先于组件

created、mounted 等钩子会被合并为数组，执行顺序固定：所有混入中的同名钩子先依次执行，再执行组件自身的钩子。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 一个混入中定义 created() { console.log('mixin A') }
• 另一个混入中定义 created() { console.log('mixin B') }
• 组件自身定义 created() { console.log('component') }
• 控制台输出顺序为：mixin A → mixin B → component

methods / computed / props：键冲突时组件覆盖混入

这些选项以对象形式存在，Vue 对它们做浅合并。如果混入和组件都定义了同名方法（如 submit），组件里的实现会完全替代混入中的版本，不会报错也不会警告。

立即学习“前端免费学习笔记（深入）”；

• 混入提供 methods: { validate() { return true } }
• 组件也写 methods: { validate() { return this.form.valid } }
• 调用 this.validate() 时，只执行组件版本
• 注意：这种覆盖是静默的，容易导致预期外的行为，建议在命名上加前缀（如 mixValidate）或文档标注

components / directives / filters：同样遵循组件覆盖原则

自定义组件、指令、过滤器等资源类选项，在合并时也采用对象合并方式。若混入注册了 loadingButton，而组件也声明同名 components，则组件声明的版本生效。

• 适合用于“默认提供 + 按需替换”场景，比如通用表单组件混入提供基础校验指令，业务组件可重写适配特定规则
• 不推荐在多个混入中重复注册同名资源，否则行为不可控