React 有 ahooks，Vue3 一直用 VueUse。但 ahooks 的開發(fā)者一旦切到 Vue3，會發(fā)現(xiàn)：

• useFetch / useAxios 功能單一，只負(fù)責(zé)“發(fā)請求 + 返回?cái)?shù)據(jù)”；
• 缺少 防抖、節(jié)流、輪詢、緩存-SWR、錯誤重試 等常見能力；
• 不能插件化，想做全局請求狀態(tài)管理或跨 Tab 廣播只能自己封裝。

于是，社區(qū)出現(xiàn)了新的答案：Vue Hooks Plus。

Vue Hooks Plus 是什么？

一句話：一個專為 Vue3 打造、對標(biāo) ahooks 的高性能 Hooks 庫，全面覆蓋基礎(chǔ) + 進(jìn)階場景，插件化擴(kuò)展，TypeScript 優(yōu)先。

核心特性一覽：

Vue Hooks Plus 現(xiàn)已內(nèi)置 上百個 即拿即用的 Hooks，覆蓋日常開發(fā)的絕大多數(shù)場景；

下面僅以 Hook —— useRequest 為例，帶你感受它的威力。

useRequest：一條 Hook 解決 90 % 請求場景

10 種能力，一行配置開關(guān)：

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 自動同步數(shù)據(jù)

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

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

當(dāng)用戶在 A 標(biāo)簽頁刷新列表，B 標(biāo)簽頁實(shí)時同步，零后端成本。

組件級 Hook

用官方提供的 createUseRequestComponent 工廠函數(shù)，3 步就能把“請求 + Loading + 錯誤 + 視圖”封裝成可復(fù)用組件：

• 生成：

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。

性能 & 體積對比：

寫在最后

如果你正在 Vue3 項(xiàng)目中：

• 受夠了手寫請求防抖 / 緩存 / 重試邏輯；
• 想要輕量、可插拔、TypeScript 完整的 Hooks 工具箱；
• 或者從 React 切過來，懷念 ahooks 的爽感；

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

• ?? 官方文檔（中/英）：https://inhiblabcore.github.io/vue-hooks-plus
• ?? 源碼 & Issues：https://github.com/InhiblabCore/vue-hooks-plus