【vue】Vue2和Vue3中的代码逻辑复用对比(mixins、自定义hook):


一、前言:

mixins是Vue2.x Options API中常用的代码逻辑抽离手段,在Vue3.x中也同样可以使用。
虽然好用,但其仍有一些比较显著的缺点,而Vue3.x引入的Composition API中的自定义hook。
很好的解决了mixins带来的一些问题,本文将简单的对比一下这两种实现手段。

二、mixins:
【1】mixins是什么?

image.png

【2】mixins如何使用?

image.png

【3】mixins的一些特性:

1.mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用。
image.png
2.组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

(1)组件的同名data 会覆盖 mixins的同名data;组件的同名methods 会覆盖 mixins的同名methods;组件的同名filters 会覆盖 mixins的同名filters
(2)虽然是具有相同逻辑的组件,但是每个组件肯定不可能完全100%相同,会有不同的属性或者不同的methods或者filters等。
(3)如果组件里没有写data/methods/filters……等的话,会自动继承mixins里的data/methods/filters…;如果写了就会以组件里定义的data/methods/filters……为准。

3.不同mixin里的同名方法,按照引进的顺序,最后的覆盖前面的同名方法。

比如两个文件mixin1.js、mixin2.js,都有同名方法: test(),且我们的引入顺序是:[mixin1,mixin2],那么最终执行的方法就是mixin2里的 test()

【4】mixins的缺点:

1.变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。

组件里可以引入多个mixin,并直接隐式调用mixin里的变量/方法,这会让我们有时候混乱 这些变量/方法 分别是哪个mixin里的?

2.多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突。

比如组件1中的方法要输出属性info,但是组件2中也有同名属性info,且覆盖了组件1中的属性info,那么当执行组件1中的方法时,输出的确实组件2中的属性,这个我们可以避免,但是一不小心就会导致冲突,很容易制造混乱。

3.mixins和组件可能出现多对多的关系,复杂度较高(即一个组件可以引用多个mixins,一个mixins也可以被多个组件引用)。

注:VUE3提出的Composition API旨在解决这些问题。mixins 的缺点是 Composition API 背后的主要动因之一,Composition API 受到 React Hook 的启发。

三、hook:
【1】Vue3.x中的自定义hook函数是什么?

使用Vue3的组合API封装的可复用的功能函数;自定义hook的作用类似于vue2中的mixin技术;自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

【2】mixins和Composition API hook解决的区别:

image.png

  • 22
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值