在Vue3的Composition API生態(tài)中，Vue Hooks Plus 作為一款專注于提供高質(zhì)量、高復(fù)用性Hooks的工具庫(kù)，正在成為許多開發(fā)者的新選擇。它基于Vue3的Composition API設(shè)計(jì)，封裝了大量常見場(chǎng)景的邏輯，幫助開發(fā)者減少重復(fù)代碼、提升開發(fā)效率。

一、什么是Vue Hooks Plus？

Vue Hooks Plus 是一個(gè)為Vue3量身打造的Hooks庫(kù)，核心目標(biāo)是將組件中常見的邏輯（如狀態(tài)管理、DOM交互、生命周期處理、網(wǎng)絡(luò)請(qǐng)求等）抽離為可復(fù)用的Hooks，讓開發(fā)者能更專注于業(yè)務(wù)邏輯。

它的設(shè)計(jì)理念與React Hooks類似，但完全適配Vue3的響應(yīng)式系統(tǒng)和Composition API特性，同時(shí)提供了更貼合Vue生態(tài)的使用體驗(yàn)。

文檔：https://inhiblabcore.github.io/vue-hooks-plus

二、核心特點(diǎn)

1. 場(chǎng)景全覆蓋

包含從基礎(chǔ)到復(fù)雜的各類Hooks，覆蓋：

• 狀態(tài)管理（如useToggle、useCounter）
• DOM操作（如useClickOutside、useScroll）
• 生命周期增強(qiáng)（如useMounted、useUnmounted）
• 網(wǎng)絡(luò)請(qǐng)求（如useRequest）
• 瀏覽器API（如useLocalStorage、useWindowSize）
• 業(yè)務(wù)場(chǎng)景（如useForm、usePermission）

2. TypeScript友好

所有Hooks均提供完整的類型定義，支持類型推斷，開發(fā)時(shí)能獲得良好的IDE提示，減少類型錯(cuò)誤。

3. 輕量高效

核心代碼體積小，無冗余依賴，且內(nèi)部?jī)?yōu)化了響應(yīng)式邏輯，避免不必要的重渲染。

易于集成無需額外配置，安裝后可直接在Vue3組件（包括<script setup>）中導(dǎo)入使用，與Vue生態(tài)（如Vue Router、Pinia）無縫兼容。

三、常用Hooks示例

1. useRequest：簡(jiǎn)化網(wǎng)絡(luò)請(qǐng)求

處理請(qǐng)求狀態(tài)（加載中、成功、失敗）是常見需求，useRequest 封裝了這一邏輯：

<template>
  <div>
    <div v-if="loading">加載中...</div>
    <div v-if="error">錯(cuò)誤：{{ error.message }}</div>
    <ul v-if="data">
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus';
import axios from 'axios';

// 定義請(qǐng)求函數(shù)
const fetchUserList = () => axios.get('/api/users');

// 使用useRequest管理請(qǐng)求
const { data, loading, error, run } = useRequest(fetchUserList, {
  manual: false, // 自動(dòng)執(zhí)行請(qǐng)求
});

// 手動(dòng)觸發(fā)請(qǐng)求（如刷新）
const refresh = () => run();
</script>

2. useLocalStorage：便捷操作本地存儲(chǔ)

自動(dòng)同步本地存儲(chǔ)與Vue響應(yīng)式狀態(tài)：

<script setup lang="ts">
import { useLocalStorage } from 'vue-hooks-plus';

// 初始化本地存儲(chǔ)鍵為"userInfo"的值，默認(rèn)值為{}
const [userInfo, setUserInfo] = useLocalStorage('userInfo', {});

// 修改時(shí)自動(dòng)同步到localStorage
const updateUser = () => {
  setUserInfo({ name: '張三', age: 20 });
};
</script>

3. useClickOutside：檢測(cè)點(diǎn)擊外部事件

常用于關(guān)閉彈窗、下拉菜單等場(chǎng)景：

<template>
  <div ref="container" class="dropdown">
    <button @click="show = true">打開菜單</button>
    <div v-if="show" class="menu">菜單內(nèi)容</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useClickOutside } from 'vue-hooks-plus';

const container = ref<HTMLDivElement>(null);
const show = ref(false);

// 點(diǎn)擊容器外部時(shí)關(guān)閉菜單
useClickOutside(container, () => {
  show.value = false;
});
</script>

四、安裝與使用

安裝通過npm或yarn安裝：

npm i vue-hooks-plus --save
# 或
yarn add vue-hooks-plus

使用流程直接在組件中導(dǎo)入所需Hooks，無需全局注冊(cè)：

<script setup>
import { useToggle } from 'vue-hooks-plus';

// 使用Hooks
const [state, toggle] = useToggle(false);
</script>

五、與同類庫(kù)對(duì)比（如VueUse）

Vue Hooks Plus 與知名的VueUse定位相似，但有以下差異：

• API設(shè)計(jì)：Vue Hooks Plus 的部分Hooks更注重業(yè)務(wù)場(chǎng)景的簡(jiǎn)潔性（如useForm對(duì)表單驗(yàn)證的封裝更直接）。
• 體積：核心包更小，適合對(duì)體積敏感的項(xiàng)目。
• 更新頻率：更專注于實(shí)用場(chǎng)景的迭代，新增Hooks多圍繞實(shí)際業(yè)務(wù)需求。

六、總結(jié)

Vue Hooks Plus 為Vue3開發(fā)者提供了一套"即用型"的邏輯封裝，尤其適合希望減少重復(fù)代碼、提升開發(fā)效率的團(tuán)隊(duì)。無論是簡(jiǎn)單的狀態(tài)切換，還是復(fù)雜的網(wǎng)絡(luò)請(qǐng)求管理，它都能提供簡(jiǎn)潔的解決方案，讓開發(fā)者更聚焦于業(yè)務(wù)本身。

如果你的項(xiàng)目基于Vue3，且頻繁處理重復(fù)邏輯，不妨嘗試Vue Hooks Plus，它可能會(huì)成為你開發(fā)中的得力工具。