主页 > 区块链钱包 > [imtoken下载]Vue3编程流畅技巧自定义Hooks

[imtoken下载]Vue3编程流畅技巧自定义Hooks

管理员 区块链钱包 2022年07月04日

说明:上面是Vue2 Option Api的写法,一个组件下含有data 、methos、computed、watch,同一个功能需要分开写在这些函数上,如果代码量少,那看起来似乎十分明了清晰。一旦代码量大功能复杂,各个功能分开写,维护的时候data 、methos、computed、watch都需要来回切,反而显得过于分散,又高度耦合。

Composition Api解耦Vue2 Option Api实现低耦合高内聚

2、无法向Mixin传递参数来改变逻辑

但是Vue3自定义Hooks却可以:

export default { mixins: [ addMixin, subMixin], //组件内混入加法和减法Mixin mounted(){ this.add(num1,num2) //调用addMixin内部的add方法 this.sub(num1,num2) //调用subMixin内部的sub方法 } }

可以通过调用Mixin内部方法来传递参数,却无法直接给Mixin传递参数,因为Mixin不是函数形式暴露的,不发传参

实例:

简单的加减法计算,将加法和减法抽离为2个自定义Hooks,并且相互传递响应式数据

1、Mixin难以追溯的方法与属性

Vue3自定义Hooks却可以

//减法功能-Hook import { ref, watch } from 'vue'; export function useSub ({ num1, num2 }){ const subNum = ref(0) watch([num1, num2], ([num1, num2]) => { subFn(num1, num2) }) const subFn = (num1, num2) => { subNum.value = num1 - num2 } return { subNum, subFn } }

加减法计算组件

说明:如果是Composition Api在功能复杂、代码量巨大的组件下,我们配合自定义Hook,将代码按功能分块写,变量和方法在一起定义和调用,比如A功能下集成了响应式变量和方法,我们后期维护只需要改动A功能模块下的代码,不会像Vue2在Option Api需要同时关注逻辑分散的methos和data。

1、Mixin 很容易发生冲突:因为每个 mixin 的 property 都被合并到同一个组件中,所以为了避免 property 名冲突,你仍然需要了解其他每个特性。

个人碎碎念:但是这些所谓的提高开发体验都是需要开发者不断学习养成编码好习惯,同样是Vue3写Compoosition Api有的人就能写得和诗一样,有的人却能写得像一样(衷心希望每个开发者都有一颗对技术热衷的心,不要为了开发而开发,前人写翔让后人尝!抱歉最近因为维护老项目太多感慨)

Option Api代码量少还好,代码量多容易导致高耦合!

将可复用功能抽离为外部JS文件

2、可重用性是有限的:我们不能向 mixin 传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性。

为什么Vue3要用自定义Hook?:

结论:就是为了让Compoosition Api更好用更丰满,让写Vue3更畅快!像写诗一样写代码! 其实这个问题更深意义是为什么Vue3比Vue2更好!无外呼性能大幅度提升,其实编码体验也是Vue3的优点**Composition Api的引入(解决Option Api在代码量大的情况下的强耦合)** 让开发者有更好的开发体验。

//组件内 //加法功能-自定义Hook(将响应式变量或者方法形式暴露出来) const { addNum, addFn } = useAdd({ num1, num2 }) addFn(num1.value, num2.value)//主动调用,返回最新addNum //平均功能-自定义Hook- hook传入参数值来其他hook暴露出来的变量 const { averageNum, averageFn} = useAverage(addNum) averageFn(addNum.value)

Vue3自定义Hooks可以灵活传递任何参数来改变它的逻辑,参数不限于其他hook的暴露出来的变量,这提高了Vue3在抽象逻辑方面的灵活性。

Hooks在前端领域并没有明确定义,借用知乎大佬的定义:在JS里是callback,事件驱动,集成定义一些可复用的方法。

以函数形式抽离一些可复用的方法像钩子一样挂着,随时可以引入和调用,实现高内聚低耦合的目标;

Vue3官方文档并没有对自定义Hooks做任何定义,却无处不在在使用这个技巧,很多开源项目也在用这个技巧,所以作为一个合格的Vuer学会自定义Hooks让Composition Api写起来更丰满是十分必要的!(飞机-官方文档在偷偷使用自定义Hooks)

Vue3自定义Hooks定义:

个人理解:一些可复用的方法像钩子一样挂着,可以随时被引入和调用以实现高内聚低耦合的目标,应该都能算是hook;

//加法功能-自定义Hook(将响应式变量或者方法形式暴露出来) const { totalNum:addNum, addFn } = useAdd({ num1, num2 }) addFn(num1.value, num2.value) //减法功能-自定义Hook (将响应式变量或者方法形式暴露出来) const { totalNum:subNum, subFn } = useSub({ num1, num2 }) subFn(num1.value, num2.value)

在Vue3自定义Hooks中,虽然加法和减法Hooks都返回了totalNum,但是利用ES6对象解构很轻松给变量重命名

(在setup函数解构出自定义hooks的变量和方法)

我相信写Vue2的同学,一定深有感触,一个组件下定义大量变和大量方法,方法嵌套方法,,方法之间互相共享变量,维护这样的代码,看似容易理解的Option Api写法,我们需要在methos、data、template之间来回切,Option Api这种写法,代码量和功能小巧时是十分简单明了的,但是代码量一多,功能一复杂,我相信review代码的时候头都痛。

export default { mixins: [ addMixin, subMixin], //组件内混入加法和减法Mixin mounted(){ this.add(num1,num2) //调用加法addMixin内部的add方法 this.sub(num1,num2) //调用减法subMixin内部的sub方法 } }

如果this.add(num1,num2)和 this.sub(num1,num2) 计算的结果返回的同名变量totalNum,由于JS单线程,后面引入的会覆盖前面的,totalNum最终是减法sub的值

Vue3自定义Hooks可以灵活传递任何参数来改变它的逻辑,参数不限于其他hook的暴露出来的变量

以上就是Vue3编程流畅技巧自定义Hooks的详细内容,更多关于Vue3编程自定义Hooks的资料请关注编程宝库其它相关文章!

把Mixin和自定义Hook进行比较,一个是Option Api的体现,一个是Composition Api的体现。如果能理解高内聚低耦合的思想,那么就能理解为什么Vue3是使用Composition Api,并通过各种自定义Hooks使代码更强壮。像写诗一样写代码。而不是写屎。

相对的Composition Api在功能复杂、代码量巨大的组件下,我们配合自定义Hooks,将代码通过功能分块写,响应变量和方法在一起定义和调用,这样后期我们改功能A只需要关注功能A块下的代码,不会像Vue2在Option Api需要同时关注methos和data。。。。。

上面这段是Vue3官方文档的内容,可以概括和补充为:

Vue3时代Composition Api,通过利用各种Hooks和自定义Hooks将碎片化的响应式变量和方法按功能分块写,实现高内聚低耦合

Vue3自定义Hooks

Mixins

Vue3编程流畅技巧自定义Hooks Vue3自定义Hooks让写Vue3更畅快

hook: 直译[hʊk] 钩子

Mixins

Composition Api的优点之一就是摆脱无脑this导致的强耦合,功能之间互相this,变量和方法在各个方法混杂,无处不在的this是强耦合的,虽然方便,但是碎片化的option api 后期维护是麻烦的。

本文网络收集整理,不构成任何投资建议。转载请注明出处:https://www.bnlive.com.cn/qklqb/8100.html