VueUse使用及造轮子选择对比示例详解

发布日期:2025-01-03 17:53    点击次数:170

💬 前言 想想一名React开发开发Vue是什么体验。就在今天初含泪写多一个vue项目,不是转,是写多!选用的是vue3+vite开发。Composition API 让我得心应手。 之前react开发选的是react16,ahooks是我接触最多的hooks库了,很贴合我的业务。在使用vue3的时候开发的时候选取了 vueuse 。 👨‍🏫 问题 在前端开发中和请求打交道是最多的,大多数业务都是restful api架构,我们拿到数据做处理,当前流行的框架配备着状态机制,在依赖变化时进行重新请求等。 vueuse 中的 useFetch 和 useAxios 是作为请求的 hook。 useFetch功能比较单一,只有请求体的一些基本功能。useAxios 更多基于axios内置功能的封装,业务中的依赖刷新,防抖,节流,缓存等功能都没有的。 这里就有小伙伴问了,那你在 useAxios上封装这些节流防抖功能就好了,先不说需要侵入式的修改这个钩子,它仅支持axios,万一项目变成request呢? 🙋‍♂️ 解决 ahooks 是前端界大名鼎鼎的 react 的 hooks,它含有更加丰富的功能,能贴合我们更多的业务,其中的 useRequest 是满足我的需求的,但苦于没有vue版本,于是我觉得自己开发一版基于vue3特性的useRequest 。它具备了ahooks的所有功能: 自动请求/手动请求轮询防抖节流屏幕聚焦重新请求错误重试loading delaySWR(stale-while-revalidate)缓存插件式 这个useRequest 请求体允许传入任意promise对象,所以它并不限制是axios还是request,并且功能都是一致的。 如果想使用请求库的一些特定功能,我们可以封装那些特定功能成为useRequest的插件,可以控制在它的生命周期中调用。 所以它既体现出包容性又体现出对于单个个体特殊功能的接纳。 插件化的使用 上面实现了一个formatter返回结果的插件,它在请求完成的时候return {name: 'plugins update',age: 20,} 覆盖了请求的结果,更多详情请见文档。 下面是我基于ahooks实现的vue的hooks库 vue-hooks-plus,收获很多,框架的机制所体现出来的独特性让人眼前一亮 🤩。后续还会挑重点hooks详细讲解原理和大家分享。 更多 文档地址 GitHub地址 以上就是VueUse使用及造轮子选择对比示例详解的详细内容,更多关于VueUse对比造轮子的资料请关注脚本之家其它相关文章! 您可能感兴趣的文章:Vue3+vueuse实现放大镜示例详解VueUse功能精简你的dependencies5个可以加速开发的VueUse函数库(小结)Vue新玩具VueUse的具体用法vueuse的useScroll函数源码分析

 




Powered by Prime Numbers Labs Ecosystem 中文站 @2013-2022 RSS地图 HTML地图

Copyright Powered by365站群 © 2013-2024