浅谈我为什么不使用VueUse,而选择造轮子
前言
想想一名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 是基于 vueuse 的思想封装的 react 的 hooks,它含有更加丰富的功能,能贴合我们更多的业务,其中的 useRequest
是满足我的需求的,但苦于没有vue版本,于是我觉得自己开发一版基于vue3特性的useRequest
。它具备了ahooks的所有功能:
- 自动请求/手动请求
- 轮询
- 防抖
- 节流
- 屏幕聚焦重新请求
- 错误重试
- loading delay
- SWR(stale-while-revalidate)
- 缓存
- 插件式
const {
loading: Ref,
data?: Ref,
error?: Ref,
params: Ref,
run: (...params: TParams) => void,
runAsync: (...params: TParams) => Promise,
refresh: () => void,
refreshAsync: () => Promise,
mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
cancel: () => void,
} = useRequest(
service: (...args: TParams) => Promise,
{
manual?: boolean,
defaultParams?: TParams,
onBefore?: (params: TParams) => void,
onSuccess?: (data: TData, params: TParams) => void,
onError?: (e: Error, params: TParams) => void,
onFinally?: (params: TParams, data?: TData, e?: Error) => void,
...高级功能,更多请见文档
}
);
这个
useRequest
请求体允许传入任意promise对象,所以它并不限制是axios还是request,并且功能都是一致的。如果想使用请求库的一些特定功能,我们可以封装那些特定功能成为useRequest
的插件,可以控制在它的生命周期中调用。所以它既体现出包容性又体现出对于单个个体特殊功能的接纳。插件化的使用
{{ data?.name ?? '-' }}
{{ data?.age ?? '-' }}
上面实现了一个formatter返回结果的插件,它在请求完成的时候
return {name: 'plugins update',age: 20,}
覆盖了请求的结果,更多详情请见文档。下面是我基于ahooks实现的vue的hooks库
vue-hooks-plus
,收获很多,框架的机制所体现出来的独特性让人眼前一亮 。后续还会挑重点hooks详细讲解原理和大家分享。更多
文档地址
GitHub地址
大家 star star ,感谢支持。
【浅谈我为什么不使用VueUse,而选择造轮子】
文章图片
推荐阅读
- @荷边书房@注解四书《论语》【276】建立自我,追求无我
- 大学生活
- 我们都有间歇性努力症
- 我的出生
- 土房子
- 在凌晨醒来
- 他玩王者荣耀都不带我开黑,这种男朋友还值得爱吗
- 为什么你的广告不吸引人()
- 本该二月花开,我却渐行不安
- 可惜呀!我不是个十足的善人