Vue3 開發新選擇：又一 Hooks 神庫開源！
React 有 ahooks，Vue3 一直用 VueUse。但 ahooks 的開發者一旦切到 Vue3，會發現：
- useFetch / useAxios 功能單一，只負責“發請求 + 返回數據”；
- 缺少 防抖、節流、輪詢、緩存-SWR、錯誤重試 等常見能力；
- 不能插件化，想做全局請求狀態管理或跨 Tab 廣播只能自己封裝。
于是，社區出現了新的答案：Vue Hooks Plus。
Vue Hooks Plus 是什么？
一句話：一個專為 Vue3 打造、對標 ahooks 的高性能 Hooks 庫，全面覆蓋基礎 + 進階場景，插件化擴展，TypeScript 優先。
核心特性一覽：
特性 | 說明 |
?? useRequest | 請求中間件，支持 |
?? 插件體系 | 官方已提供「全局請求狀態」「同源跨窗口廣播」等插件，可自定義 |
?? TypeScript | 100 % 類型提示， |
?? 按需加載 |
友好，包體更小 |
?? 交互式 Demo | 官網可在線改代碼，實時預覽 |
?? SSR 支持 |
開箱即用，無額外配置 |
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 Plus | VueUse |
gzip 體積（常用 5 個 Hook） | ~ 5.8 KB | ~ 9.3 KB |
首屏加載 | 按需加載 | 按需加載 |
SSR 兼容性 | ? 官方驗證 | ? |
插件擴展 | ? | ? |
寫在最后
如果你正在 Vue3 項目中：
- 受夠了手寫請求防抖 / 緩存 / 重試邏輯；
- 想要輕量、可插拔、TypeScript 完整的 Hooks 工具箱；
- 或者從 React 切過來，懷念 ahooks 的爽感；
VueHooks Plus 值得你 今天 就試一試！
- ?? 官方文檔（中/英）：https://inhiblabcore.github.io/vue-hooks-plus
- ?? 源碼 & Issues：https://github.com/InhiblabCore/vue-hooks-plus
