vue mixin vs HOC

Mixin的弊端

  • 命名空间冲突
  • 模板数据来源不清晰(尤其是嵌套加嵌套)

hoc(higher-order components,如keep-alive, transition)的弊端:

  • props命名空间冲突
  • props来源不清晰
  • 额外的组件实例消耗

vue3 Function-based API

  • 没有以上问题
  • 对比class api有以下优势:
  • 更好的typescript类型推导支持
  • 更灵活的逻辑复用能力
  • Tree-shaking友好
  • 代码更容易被压缩

例子1:vue mixin vs HOC实例1
例子2:vue mixin vs HOC实例2

参考:探索Vue高阶组件
Vue Function-based API RFC

你可能感兴趣的:(vue mixin vs HOC)