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