Vue3中应用Hooks的一些想法

108 阅读2分钟

基于Vue3进行若干项目开发,在实际开发应用中应用Composition API模式进行代码编写,真是一扫Vue2中开发痛点。总结下这种开发模式带来的好处:

公用业务逻辑

首先明确下,这里说的公用的业务逻辑,而不是公用逻辑或者方法。

这之间的区别在于,公用逻辑一般可以跨项目使用,一般指的是各种重用的数字,字符串等处理方法或者库(如loadash),而公用业务逻辑指的是在同一个项目里面有N个页面要处理的一些业务逻辑都有公用之处。比如,常见的ERP页面,每个页面进去都一个相似的表格,进入页面都是要先加载表格数据,实现分页等。

针对这样的场景,提取出了公用的业务逻辑之后,每个页面都可以引入对应的逻辑直接使用,不用每个页面都去实现一遍。 当然,在vue2的时候,基于mixin也可以实现公共业务逻辑的提取,但是这中间满满槽点,相信用过的人都深有体会。

代码可读性

那要是项目的每个页面都很独特,不存在业务逻辑的公用,那么这种Hooks的应用是否是就没啥大用呢?

不然,我觉得这种编码方式,解决了困扰了我很久的一个代码可读性的问题。

比如要实现一个页面逻辑来描述你一天做了些什么,简化下就是就是goCompay()和goBackHome(),但是单单goCompany()里面就包括吃早饭,进地铁站,刷卡,出地铁站...,这里面的每一个小的环节在vue2里面都是一个funtion,在代码表现和goCompany()没有任何区别,别人看到的是几十个function堆在一起,这一团逻辑里面到底那个是入口了?

有了Hooks,所有的业务逻辑都可以封装起来,抛出来的就是goCompay()和goBackHome(),别人一眼就可以清楚这个页面的主要是干嘛的。如果他想进一步了解逻辑流程的细节,也可以沿着Hooks去进一步查找。从函数的角度来说,函数功能本身也变得更加纯粹,避免副作用。