Vue3 最新 Hooks 庫發(fā)布，VueUse或?qū)⒊蔀闅v史
在Vue3的Composition API生態(tài)中，Vue Hooks Plus 作為一款專注于提供高質(zhì)量、高復用性Hooks的工具庫，正在成為許多開發(fā)者的新選擇。它基于Vue3的Composition API設(shè)計，封裝了大量常見場景的邏輯，幫助開發(fā)者減少重復代碼、提升開發(fā)效率。
一、什么是Vue Hooks Plus？
Vue Hooks Plus 是一個為Vue3量身打造的Hooks庫，核心目標是將組件中常見的邏輯（如狀態(tài)管理、DOM交互、生命周期處理、網(wǎng)絡(luò)請求等）抽離為可復用的Hooks，讓開發(fā)者能更專注于業(yè)務(wù)邏輯。
它的設(shè)計理念與React Hooks類似，但完全適配Vue3的響應(yīng)式系統(tǒng)和Composition API特性，同時提供了更貼合Vue生態(tài)的使用體驗。
文檔：https://inhiblabcore.github.io/vue-hooks-plus
二、核心特點
1. 場景全覆蓋
包含從基礎(chǔ)到復雜的各類Hooks，覆蓋：
- 狀態(tài)管理（如useToggle、useCounter）
- DOM操作（如useClickOutside、useScroll）
- 生命周期增強（如useMounted、useUnmounted）
- 網(wǎng)絡(luò)請求（如useRequest）
- 瀏覽器API（如useLocalStorage、useWindowSize）
- 業(yè)務(wù)場景（如useForm、usePermission）
2. TypeScript友好
所有Hooks均提供完整的類型定義，支持類型推斷，開發(fā)時能獲得良好的IDE提示，減少類型錯誤。
3. 輕量高效
核心代碼體積小，無冗余依賴，且內(nèi)部優(yōu)化了響應(yīng)式邏輯，避免不必要的重渲染。
易于集成無需額外配置，安裝后可直接在Vue3組件（包括<script setup>）中導入使用，與Vue生態(tài)（如Vue Router、Pinia）無縫兼容。
三、常用Hooks示例
1. useRequest：簡化網(wǎng)絡(luò)請求
處理請求狀態(tài)（加載中、成功、失敗）是常見需求，useRequest 封裝了這一邏輯：
<template>
<div>
<div v-if="loading">加載中...</div>
<div v-if="error">錯誤：{{ 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';
// 定義請求函數(shù)
const fetchUserList = () => axios.get('/api/users');
// 使用useRequest管理請求
const { data, loading, error, run } = useRequest(fetchUserList, {
manual: false, // 自動執(zhí)行請求
});
// 手動觸發(fā)請求（如刷新）
const refresh = () => run();
</script>2. useLocalStorage：便捷操作本地存儲
自動同步本地存儲與Vue響應(yīng)式狀態(tài)：
<script setup lang="ts">
import { useLocalStorage } from 'vue-hooks-plus';
// 初始化本地存儲鍵為"userInfo"的值，默認值為{}
const [userInfo, setUserInfo] = useLocalStorage('userInfo', {});
// 修改時自動同步到localStorage
const updateUser = () => {
setUserInfo({ name: '張三', age: 20 });
};
</script>3. useClickOutside：檢測點擊外部事件
常用于關(guān)閉彈窗、下拉菜單等場景：
<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);
// 點擊容器外部時關(guān)閉菜單
useClickOutside(container, () => {
show.value = false;
});
</script>四、安裝與使用
安裝通過npm或yarn安裝：
npm i vue-hooks-plus --save
# 或
yarn add vue-hooks-plus使用流程直接在組件中導入所需Hooks，無需全局注冊：
<script setup>
import { useToggle } from 'vue-hooks-plus';
// 使用Hooks
const [state, toggle] = useToggle(false);
</script>五、與同類庫對比（如VueUse）
Vue Hooks Plus 與知名的VueUse定位相似，但有以下差異：
- API設(shè)計：Vue Hooks Plus 的部分Hooks更注重業(yè)務(wù)場景的簡潔性（如useForm對表單驗證的封裝更直接）。
- 體積：核心包更小，適合對體積敏感的項目。
- 更新頻率：更專注于實用場景的迭代，新增Hooks多圍繞實際業(yè)務(wù)需求。
六、總結(jié)
Vue Hooks Plus 為Vue3開發(fā)者提供了一套"即用型"的邏輯封裝，尤其適合希望減少重復代碼、提升開發(fā)效率的團隊。無論是簡單的狀態(tài)切換，還是復雜的網(wǎng)絡(luò)請求管理，它都能提供簡潔的解決方案，讓開發(fā)者更聚焦于業(yè)務(wù)本身。
如果你的項目基于Vue3，且頻繁處理重復邏輯，不妨嘗試Vue Hooks Plus，它可能會成為你開發(fā)中的得力工具。
