首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

用了组合式 (Composition) API 后代码变得更乱了,怎么办?

编程知识
2024年08月02日 07:36

前言

组合式 (Composition) API 的一大特点是“非常灵活”,但也因为非常灵活,每个开发都有自己的想法。加上项目的持续迭代导致我们的代码变得愈发混乱,最终到达无法维护的地步。本文是我这几年使用组合式API的一些经验总结,希望通过本文让你也能够写出易维护优雅组合式API代码。

欧阳写了一本开源电子书vue3编译原理揭秘,这本书初中级前端能看懂。完全免费,只求一个star。

选项式API

vue2的选项式API因为每个选项都有固定的书写位置(比如数据就放在data里面,方法就放在methods里面),所以我们只需要将代码放到对应的选项中就行了。

优点是因为已经固定了每个代码的书写位置,所有人写出来的代码风格都差不多。

缺点是当单个组件的逻辑复杂到一定程度时,代码就会显得特别笨重,非常不灵活。
option-api

随意的写组合式API

vue3推出了组合式 (Composition) API,他的主要特点就是非常灵活。解决了选项式API不够灵活的问题。但是灵活也是一把双刃剑,因为每个开发的编码水平不同。所以就出现了有的人使用组合式 (Composition) API写出来的代码非常漂亮和易维护,有的人写的代码确实很混乱和难易维护。

比如一个组件开始的时候还是规规矩矩的写,所有的ref响应式变量放在一块,所有的方法放在一块,所有的computed计算属性放在一块。

但是随着项目的不断迭代 ,或者干脆是换了一个人来维护。这时的代码可能就不是最开始那样清晰了,比如新加的代码不管是refcomputed还是方法都放到一起去了。如下图:
chao

只有count1count2时,代码看着还挺整齐的。但是随着count3的代码加入后看着就比较凌乱了,后续如果再加count4的代码就会更加乱了。

有序的写组合式API

为了解决上面的问题,所以我们约定了一个代码规范。同一种API的代码全部写在一个地方,比如所有的props放在一块、所有的emits放在一块、所有的computed放在一块。并且这些模块的代码都按照约定的顺序去写,如下图:
sort

随着vue组件的代码增加,上面的方案又有新的问题了。

还是前面的那个例子比如有5个countref变量,对应的computedmethods也有5个。此时我们的vue组件代码量就很多了,比如此时我想看看computed1increment1的逻辑是怎么样的。

因为computed1increment1函数分别在文件的computedmethods的代码块处,computed1increment1之间隔了几十行代码,看完computed1的代码再跳转去看increment1的代码就很痛苦。如下图:
long

这时有小伙伴会说,抽成hooks呗。这里有5个count,那么就抽5个hooks文件。像这样的代码。如下图:
hooks-file

一般来说抽取出来的hooks都是用来多个组件进行逻辑共享,但是我们这里抽取出来的useCount文件明显只有这个vue组件会用他。达不到逻辑共享的目的,所以单独将这些逻辑抽取成名为useCounthooks文件又有点不合适。

最终解决方案

我们不如将前面的方案进行融合一下,抽取出多个useCount函数放在当前vue组件内,而不是抽成单个hooks文件。并且在多个useCount函数中我们还是按照前面约定的规范,按照顺序去写ref变量、computed、函数的代码。

最终得出的最佳实践如下图:
perfect

上面这种写法有几个优势:

  • 我们将每个count的逻辑都抽取成单独的useCount函数,并且这些函数都在当前vue文件中,没有将其抽取成hooks文件。如果哪天useCount1中的逻辑需要给其他组件使用,我们只需要新建一个useCount文件,然后直接将useCount1函数的代码移到新建的文件中就可以了。

  • 如果我们想查看doubleCount1increment1中的逻辑,只需要找到useCount1函数,关于count1相关的逻辑都在这个函数里面,无需像之前那样翻山越岭跨越几十行代码才能从doubleCount1的代码跳转到increment1的代码。

总结

本文介绍了使用Composition API的最佳实践,规则如下:

  • 首先约定了一个代码规范,Composition API按照约定的顺序进行书写(书写顺序可以按照公司代码规范适当调整)。并且同一种组合式API的代码全部写在一个地方,比如所有的props放在一块、所有的emits放在一块、所有的computed放在一块。

  • 如果逻辑能够多个组件复用就抽取成单独的hooks文件。

  • 如果逻辑不能给多个组件复用,就将逻辑抽取成useXXX函数,将useXXX函数的代码还是放到当前组件中。

    第一个好处是如果某天useXXX函数中的逻辑需要给其他组件复用,我们只需要将useXXX函数的代码移到新建的hooks文件中即可。

    第二个好处是我们想查看某个业务逻辑的代码,只需要在对应的useXXX函数中去找即可。无需在整个vue文件中翻山越岭从computed模块的代码跳转到function函数的代码。

关注公众号:【前端欧阳】,给自己一个进阶vue的机会

另外欧阳写了一本开源电子书vue3编译原理揭秘,这本书初中级前端能看懂。完全免费,只求一个star。

From:https://www.cnblogs.com/heavenYJJ/p/18337613
本文地址: http://www.shuzixingkong.net/article/686
0评论
提交 加载更多评论
其他文章 还在为找开源项目发愁么?或许这个项目能帮助你
大家好,我是晓凡。 有很多小伙伴尤其是在校大学生或者想转软件开发的小伙伴,经常会问:准备找工作了,没有项目经验怎么办呢? 这时候上网找开源项目学习,就是一个获取项目经验比较靠谱的途径。 这时候又有小伙伴问了,去哪找开源项目呢? 当然是全球最大的的同性交友网站 GitHub 上找了。 这时候又有小伙伴
还在为找开源项目发愁么?或许这个项目能帮助你 还在为找开源项目发愁么?或许这个项目能帮助你 还在为找开源项目发愁么?或许这个项目能帮助你
产品、开发、测试人手一份:升级上线检查清单大全
在软件开发过程中,尤其是在准备将新功能或修复后的版本上线之前,进行详尽的自测和上线前检查是至关重要的。以下是一个从多个维度综合考量的上线升级检查清单(Checklist),旨在帮助团队确保软件质量、稳定性和安全性: 1、代码质量与构建检查 代码审查已完成 所有代码变更已通过单元测试,特别是与升级相关
SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的,不要乱点鸳鸯谱
开心一刻 今天跟我姐聊天 我:我喜欢上了我们公司的一个女同事,她好漂亮,我心动了,怎么办 姐:喜欢一个女孩子不能只看她的外表 我:我知道,还要看她的内在嘛 姐:你想多了,还要看看自己的外表 背景介绍 在 SpringBoot2.7 霸王硬上弓 Logback1.3 → 不甜但解渴 原理分析那部分,我
SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的,不要乱点鸳鸯谱 SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的,不要乱点鸳鸯谱 SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的,不要乱点鸳鸯谱
前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线
本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。
前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线 前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线 前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线
jpa+querydsl的平替国产easy-query最好用的orm
jpa+querydsl的平替国产easy-query最好用的orm 一款国产最强java orm,完美支持可控强类型dsl,外加完美支持对象模型筛选拉取的orm,拥有非常智能的include(s)一对多、一对一、多对多、多对一实现的orm 地址github: https://github.com/
数据库系列: 主流分库分表中间件介绍(图文总结)
相关文章 数据库系列:MySQL慢查询分析和性能优化 数据库系列:MySQL索引优化总结(综合版) 数据库系列:高并发下的数据字段变更 数据库系列:覆盖索引和规避回表 数据库系列:数据库高可用及无损扩容 数据库系列:使用高区分度索引列提升性能 数据库系列:前缀索引和索引长度的取舍 数据库系列:MyS
数据库系列: 主流分库分表中间件介绍(图文总结) 数据库系列: 主流分库分表中间件介绍(图文总结)
浅析前端数据埋点监控:用户行为与性能分析的桥梁
总的来说,前端埋点技术不仅是提升用户体验和产品运行效率的利器,更是实现数据驱动决策的重要工具。随着各类专业工具的出现,如腾讯有数、百度统计和微软Clarity,企业可以根据需求选择最适合的工具进行数据分析和优化,从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据,企业能够做出更明智的
浅析前端数据埋点监控:用户行为与性能分析的桥梁 浅析前端数据埋点监控:用户行为与性能分析的桥梁 浅析前端数据埋点监控:用户行为与性能分析的桥梁
.NET8 Blazor 从入门到精通:(一)关键概念
目录Blazor 的关键概念项目模板Razor 语法依赖注入注入配置HeadOutlet 组件@code 分离Blazor 调试CSS 隔离调用JavaScript 最近在学习 Blazor ,在B站上找了一个国外的课程边看边学习。嗯,原价¥1503的课程,大概200多美元,课程链接如下: B站(大
.NET8 Blazor 从入门到精通:(一)关键概念 .NET8 Blazor 从入门到精通:(一)关键概念 .NET8 Blazor 从入门到精通:(一)关键概念