Vue.mixin的使用场景和原理


1.1 Vue.mixin 概念

mixin 可以用来扩展组件,将公共逻辑进行抽离。在需要该逻辑时进行“混入”,采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件中的数据冲突,会采用“就近原则”以组件的数据为准。

mixin 中有很多缺陷 “命名冲突问题”、”数据来源问题”,Vue3 采用 CompositionAPI 提取公共逻辑非常方便。

mixins 在 Vue 3 支持主要是为了向后兼容,因为生态中有许多库使用到。在新的应用中应尽量避免使用 mixin,特别是全局 mixin。

1.2 混入方式

Vue中我们可以局部混入全局混入。一般情况下全局混入用于编写插件。局部混入用于复用逻辑。

vue-routervuex

1.3 mixin 合并策略

核心就是:对象的合并处理。

  • props、methods、inject、computed 同名时会被替换
  • data 会被合并
  • 生命周期和 watch 方法 会被合并成队列
  • components、directives、filters 会在原型链上叠加

组件的扩展除了 mixin 之外还有一个属性叫 extends,但是不怎么常用~~~。


文章作者: 高红翔
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 高红翔 !
  目录