Vue Hooks Plus：Vue3 项目里的「新一代 Hooks 工具箱」

在 React 生态中，ahooks 是许多团队的必装库；而在 Vue3 中，我们长期依赖 VueUse 来补齐 Composition API 的能力。但对于复杂项目而言，VueUse 在“请求处理”方向的支持较轻，仅提供基本封装，例如 useFetch / useAxios，不包含高级能力（如防抖、节流、SWR、错误重试、轮询、全局状态共享插件化等）。

于是，一个专为 Vue3 打造、思路接近 ahooks 的库在社区冒头并迅速流行起来——
Vue Hooks Plus。

本文将带你从零认识 Vue Hooks Plus，理解它为什么值得在 Vue3 项目中使用，并提供多个实际示例让你快速上手。

一、Vue Hooks Plus 是什么？

一句话概括：

Vue Hooks Plus 是一个 Vue3 专用、TypeScript 优先的高性能 Hooks 工具库，拥有完善的插件体系，尤其在请求处理上可媲美 ahooks 的 useRequest 能力。

它的目标不是取代 VueUse，而是补足“VueUse 不擅长的部分”——更强大的业务 Hook、请求调度能力和插件机制。

💡 它的亮点可以用一句话总结：

• 🧩 插件化的 useRequest，可组合 10+ 高阶策略
• 🎯 更适合真实业务场景（分页、缓存、轮询、重试……）
• 🔌 可插拔插件体系：跨标签页同步、全局请求状态管理等
• 💼 官方提供组件级 Hook 工厂：一键生成高复用请求组件
• 🏎️ TypeScript 友好，类型推断丝滑
• 🎒 按需自动引入，无需手动 import
• 🌐 Nuxt3 / SSR 支持完善

这使得 Vue Hooks Plus 更像是“Vue 的 ahooks”，而不是只提供基础工具函数的 VueUse。

二、核心能力：useRequest，一条 Hook 顶 90% 业务场景

Vue Hooks Plus 中最核心的能力，就是高度可扩展的请求管理 Hook：useRequest。

它不仅能发请求，还能“配置式”地开启常用策略，比如：

• 防抖 / 节流
• SWR 缓存与状态复用
• 轮询 / 自动刷新
• 自动重试
• 延迟 loading
• 分页管理
• 请求并发控制
• 插件扩展（跨 Tab、全局状态）

只需要一行配置，就能拥有完整能力：

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
})

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
})

为什么它这么强？

因为 useRequest 并不只是一个 Hook，而是一套“可组合请求调度器”，核心是 Plugin 插件机制。每个能力（如 SWR、防抖、轮询）都是通过插件叠加实现的，因此可以自由扩展、轻盈组合。

三、插件示例：跨 Tab 自动同步请求结果

Vue Hooks Plus 提供多个官方插件，其中最实用之一是 跨 Tab 广播插件。当你在 A 标签页刷新数据时，B 标签页会实时同步，不需要任何后端支持。

import { useRequest } from 'vue-hooks-plus'
import { broadcastPlugin } from '@vue-hooks-plus/plugin-broadcast'

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

import { useRequest } from 'vue-hooks-plus'
import { broadcastPlugin } from '@vue-hooks-plus/plugin-broadcast'

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

应用场景包括：

• 多标签页列表自动同步
• 用户设置变化自动刷新
• 后台系统数据同步

不需要 IndexedDB 也不需要手写 BroadcastChannel，开箱即用。

四、组件级 Hook：3 步产出可复用“请求组件”

复杂项目中，常见模式如下：

• 发送请求
• 加载态替换 UI
• 失败展示错误信息
• 成功渲染内容

Vue Hooks Plus 直接提供了工厂函数：

export const UseUserCard = createUseRequestComponent<User>()

export const UseUserCard = createUseRequestComponent<User>()

组件使用起来非常优雅：

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

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

它的优势：

• 类型自动透出到 slot 内，不再手写类型
• UI 完全自定义
• 用一次封一次，项目中随处复用
• 适用于表格、弹窗、卡片等各种业务场景

五、三分钟从安装到自动引入

1. 安装

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

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

2. 配置自动导入（推荐）

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

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

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

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

此后，在任意组件中都可以直接使用：

const { data } = useRequest(...)

const { data } = useRequest(...)

无需 import，非常丝滑。

六、性能对比：更小、更快、更可扩展

Vue Hooks Plus 的目标并不是取代 VueUse，而是提供：

➡ 更贴近真实业务的高级 Hook
➡ 更强的扩展能力
➡ 更小的核心体积

在使用上，两者完全可以同时存在。

七、什么时候应该选择 Vue Hooks Plus？

如果你符合下面任意一条，它值得马上入手：

• 你想要更强大的 useRequest 能力，而不愿重复写防抖/缓存/重试逻辑
• 你想要一个对标 ahooks 的 Vue3 版本
• 你希望 Hook 能够以插件形式扩展能力
• 你正在做大型后台系统，涉及大量请求管理
• 你需要跨标签页同步、全局请求状态、SWR 等能力

一句话总结：

Vue Hooks Plus 是 Vue3 项目“更专业的业务型 Hooks 库”。

八、总结

Vue3 的 Composition API 提供了灵活的基础能力，但它缺少“工程级”的 Hook 体系。而 Vue Hooks Plus 正好填补了这块空白，尤其是 useRequest 的插件化设计，使其在业务场景中非常强大。

如果你来自 React 世界，怀念 ahooks 的强大；
如果你厌倦了手写复杂请求逻辑；
如果你希望 Hook 能像积木一样自由组合——

试试 Vue Hooks Plus，你会找到久违的“爽感”。

📚 文档主页：inhiblabcore.github.io/vue-hooks-plus
🔗 源码仓库：github.com/InhiblabCore/vue-hooks-plus