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

前端开发爱好者
4,598 阅读2分钟

React 有 ahooks，Vue3 一直用 VueUse。但 ahooks 的开发者一旦切到 Vue3，会发现：

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

于是，社区出现了新的答案：Vue Hooks Plus。

Vue Hooks Plus 是什么？

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

核心特性一览：

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

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

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

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

10 种能力，一行配置开关

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

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

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

从安装到部署 3 分钟

安装

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

自动引入（推荐）

// 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 PlusVueUse
gzip 体积（常用 5 个 Hook）~ 5.8 KB~ 9.3 KB
首屏加载按需加载按需加载
SSR 兼容性✅ 官方验证✅
插件扩展✅❌

写在最后

如果你正在 Vue3 项目中：

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

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

avatar
文章
阅读
粉丝