1.1 Vue.mixin 概念
mixin 可以用来扩展组件,将公共逻辑进行抽离。在需要该逻辑时进行“混入”,采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件中的数据冲突,会采用“就近原则”以组件的数据为准。
mixin 中有很多缺陷 “命名冲突问题”、”数据来源问题”,Vue3 采用 CompositionAPI 提取公共逻辑非常方便。
mixins 在 Vue 3 支持主要是为了向后兼容,因为生态中有许多库使用到。在新的应用中应尽量避免使用 mixin,特别是全局 mixin。
1.2 混入方式
在Vue
中我们可以局部混入跟全局混入。一般情况下全局混入用于编写插件。局部混入用于复用逻辑。
1.3 mixin 合并策略
核心就是:对象的合并处理。
- props、methods、inject、computed 同名时会被替换
- data 会被合并
- 生命周期和 watch 方法 会被合并成队列
- components、directives、filters 会在原型链上叠加
组件的扩展除了 mixin 之外还有一个属性叫 extends,但是不怎么常用~~~。