Vue中使用mixin与extend继承组件的区别及适用场景分别是什么？

二者核心区别 #

• 本质定位不同：extend 是 组件构造器扩展能力，用来创建基于Vue基础构造类的子类，输出是可复用的组件构造函数，本质是类的继承；而 mixin 是 属性注入的混合机制，是对现有组件实例/构造器的属性补充，本质是配置合并，不存在类继承的父子关系。
• 属性合并逻辑不同：二者和目标组件属性冲突时，都默认优先使用目标组件的自有属性；生命周期钩子会按优先级顺次执行：extend 场景下先执行父类钩子，再执行子类钩子；mixin 场景下先执行先引入的mixin钩子，再执行后引入的mixin钩子，最后执行组件自身钩子，多个mixin冲突时后引入的mixin优先级更高。
• 调用方式不同：extend 生成的构造器需要通过components选项注册为组件使用，或者直接new生成实例后手动挂载；mixin 支持全局注册（Vue.mixin()）会注入到所有组件实例，也可以在目标组件的mixins配置项中局部引入，仅作用于当前组件。
• 影响范围不同：extend 创建的是独立的组件子类，修改子类配置不会影响Vue基础构造类；全局mixin会影响所有后续创建的Vue实例，容易造成全局污染，使用风险更高。

各自适用场景 #

extend适用场景 #

• 批量生成配置高度相似的同类型组件：比如项目中统一样式、基础交互的弹窗、卡片组件，基于extend扩展不同的业务逻辑即可，无需重复编写公共配置。
• 封装基础组件父类：给业务层组件做统一继承，比如所有页面组件继承同一个基础页面类，内置统一的页面埋点、标题设置、权限校验逻辑。
• 编程式动态创建组件：比如全局提示、Toast、确认弹窗这类需要动态挂载的组件，通常基于extend生成构造器后再实例化插入DOM。

mixin适用场景 #

• 提取无关联组件的公共逻辑：比如多个页面都需要的列表分页、下拉加载、表单校验通用逻辑，不需要调整组件继承链，直接注入公共方法和数据即可。
• 特定组件的功能增强：比如给所有表格组件注入排序、筛选的通用方法，局部引入mixin即可，不会影响其他组件。
• 轻量临时功能扩展：比如临时给部分组件添加统一的操作上报逻辑，不需要改动原有组件的结构，引入mixin的改造成本更低。

注意：Vue 3生态更推荐使用Composition API替代mixin实现公共逻辑提取，解决mixin存在的命名冲突、来源不清晰的问题；extend也逐步被defineComponent、自定义组合式函数替代，但在Vue 2项目中二者仍是常用的扩展方案。

内容的提问来源于stack exchange，提问作者asotos