Vue3 开发新选择：又一 Hooks 神库开源！

作者：前端开发爱好者

原文：mp.weixin.qq.com/s/x4IkLjoKw...

React 有 ahooks ，Vue3 一直用 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 种能力，一行配置开关

arduino 复制代码

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 自动同步数据

javascript 复制代码

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 + 错误 + 视图"封装成可复用组件：

生成

arduino 复制代码

export const UseUserCard = createUseRequestComponent<User>()

使用

ini 复制代码

<UseUserCard :service="getUser" v-slot="{ data, loading }">
  <Skeleton v-if="loading"/>
  <UserCard v-else :user="data"/>
</UseUserCard>

类型自动推到 slot，支持分页、弹窗、表单等任何场景。

从安装到部署 3 分钟

安装

csharp 复制代码

npm i vue-hooks-plus
# 或
pnpm add vue-hooks-plus

自动引入（推荐）

javascript 复制代码

// 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 值得你今天就试一试！

📖 官方文档（中/英） ：inhiblabcore.github.io/vue-hooks-p...
🧩 源码 & Issues ：github.com/InhiblabCor...