摘要:React 有ahooks,Vue3 一直用VueUse。但 ahooks 的开发者一旦切到 Vue3 ,会发现:
React 有 ahooks ,Vue3 一直用 VueUse 。但 ahooks 的开发者一旦切到 Vue3 ,会发现:
useFetch / useAxios 功能单一,只负责“发请求 + 返回数据”;缺少 防抖、节流、轮询、缓存-SWR、错误重试 等常见能力;不能插件化 ,想做全局请求状态管理或跨 Tab 广播只能自己封装。一句话:一个专为 Vue3 打造、对标 ahooks 的高性能 Hooks 库,全面覆盖 基础 + 进阶场景,插件化 扩展,TypeScript 优先 。
核心特性一览:
| 特性 | 说明 | | ---
#技术分享| useRequest | 请求中间件,支持 10+
| 插件体系 | 官方已提供「全局请求状态」「同源跨窗口广播」等插件,可自定义 | | TypeScript | 100 % 类型提示,零配置即享安全 | | 按需加载 | Tree-shaking 友好,包体更小 | | 交互式 Demo | 官网可在线改代码,实时预览 | | SSR 支持 | Nuxt3 开箱即用,无额外配置 |
Vue Hooks Plus 现已内置 上百个 即拿即用的 Hooks ,覆盖日常开发的绝大多数场景;
下面仅以 Hook —— useRequest 为例,带你感受它的威力。
当用户在 A 标签页刷新列表,B 标签页实时同步,零后端成本 。
用官方提供的 createUseRequestComponent 工厂函数,3 步就能把“请求 + Loading + 错误 + 视图”封装成可复用组件:
生成export const UseUserCard = createUseRequestComponent使用类型自动推到 slot,支持分页、弹窗、表单等任何场景。npm i vue-hooks-pluspnpm add vue-hooks-plus| 指标 | VueHooks Plus | VueUse | | ---
| gzip 体积(常用 5 个 Hook) | ~ 5.8 KB | ~ 9.3 KB | | 首屏加载 | 按需加载 | 按需加载 | | SSR 兼容性 | ✅ 官方验证 | ✅ | | 插件扩展 | ✅ | ❌ |
来源:墨码行者