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ā)中的得力工具。






























