Vue3 开发新选择:又一 Hooks 神库开源!

ReactahooksVue3 一直用 VueUse 。但 ahooks 的开发者一旦切到 Vue3,会发现:

  • useFetch / useAxios 功能单一,只负责"发请求 + 返回数据";
  • 缺少 防抖、节流、轮询、缓存-SWR、错误重试 等常见能力;
  • 不能插件化 ,想做全局请求状态管理或跨 Tab 广播只能自己封装。

于是,社区出现了新的答案:Vue Hooks Plus

Vue Hooks Plus 是什么?

一句话:一个专为 Vue3 打造、对标 ahooks 的高性能 Hooks 库,全面覆盖 基础 + 进阶场景,插件化 扩展,TypeScript 优先

核心特性一览:

特性 说明
🚀 useRequest 请求中间件,支持 10+ 种高级策略(防抖、SWR、分页、并行...)
🔌 插件体系 官方已提供「全局请求状态」「同源跨窗口广播」等插件,可自定义
🎯 TypeScript 100 % 类型提示,零配置即享安全
🪄 按需加载 Tree-shaking 友好,包体更小
🎪 交互式 Demo 官网可在线改代码,实时预览
🔋 SSR 支持 Nuxt3 开箱即用,无额外配置

Vue Hooks Plus 现已内置 上百个 即拿即用的 Hooks,覆盖日常开发的绝大多数场景;

下面仅以 Hook ------ useRequest 为例,带你感受它的威力。

useRequest:一条 Hook 解决 90 % 请求场景

10 种能力,一行配置开关

ts 复制代码
import { useRequest } from 'vue-hooks-plus'

const { data, loading, run } = useRequest(getUserList, {
  paginated: true,        // 分页
  pollingInterval: 3000,  // 轮询
  debounceWait: 500,      // 防抖
  cacheKey: 'user-list',  // 缓存 + SWR
  retryCount: 3,          // 错误重试
  loadingDelay: 200       // loading 防闪烁
})

插件示例:跨 Tab 自动同步数据

ts 复制代码
import { useRequest } from 'vue-hooks-plus'
import { broadcastPlugin } from '@vue-hooks-plus/plugin-broadcast'

const { data } = useRequest(getUserList, {
  plugins: [broadcastPlugin({ name: 'userList' })]
})

当用户在 A 标签页刷新列表,B 标签页实时同步,零后端成本

组件级 Hook

用官方提供的 createUseRequestComponent 工厂函数,3 步就能把"请求 + Loading + 错误 + 视图"封装成可复用组件:

  • 生成
ts 复制代码
export const UseUserCard = createUseRequestComponent<User>()
  • 使用
html 复制代码
<UseUserCard :service="getUser" v-slot="{ data, loading }">
  <Skeleton v-if="loading"/>
  <UserCard v-else :user="data"/>
</UseUserCard>
  • 类型自动推到 slot,支持分页、弹窗、表单等任何场景。

从安装到部署 3 分钟

安装

bash 复制代码
npm i vue-hooks-plus
# 或
pnpm add vue-hooks-plus

自动引入(推荐)

ts 复制代码
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [VueHooksPlusResolver()]
    })
  ]
})

此后任何组件可直接使用 useRequest 等 Hooks,无需手动 import

性能 & 体积对比

指标 VueHooks Plus VueUse
gzip 体积(常用 5 个 Hook) ~ 5.8 KB ~ 9.3 KB
首屏加载 按需加载 按需加载
SSR 兼容性 ✅ 官方验证
插件扩展

写在最后

如果你正在 Vue3 项目中:

  • 受够了手写请求防抖 / 缓存 / 重试逻辑;
  • 想要轻量可插拔TypeScript 完整的 Hooks 工具箱;
  • 或者从 React 切过来,怀念 ahooks 的爽感;

VueHooks Plus 值得你 今天 就试一试!

相关推荐
小林rush1 分钟前
Vue3响应式系统设计与实现
前端·vue.js·前端框架
人机888号7 分钟前
instanceof 的小秘密
javascript
轻语呢喃7 分钟前
时间分片思想:多数据的前端处理方法
前端·javascript·面试
Spider_Man8 分钟前
假装渲染十万条,虚拟列表的障眼法你学会了吗?
前端·javascript·react.js
计算机程序员小杨8 分钟前
计算机毕设选题:电子商务供应链大数据分析系统Python+Django技术实现详解|毕设|计算机毕设|程序开发|项目实战
java·vue.js·python
3345543213 分钟前
vue实现表格轮播
javascript·vue.js·ecmascript
IT_陈寒19 分钟前
Vite 3.0 性能飞跃的5个关键优化点,让构建速度提升200%!
前端·人工智能·后端
赵民勇22 分钟前
npm使用的环境变量及其用法
前端·npm·node.js
i小杨1 小时前
Mac 开发环境与配置操作速查表
前端·chrome
陈随易1 小时前
改变世界的编程语言MoonBit:背景知识速览
前端·后端·程序员