“每次写 Vue 组件都要重复写 watch、setInterval，代码越堆越乱？
逻辑复用只能靠 mixins，结果命名冲突频发？
今天介绍一个神器——vue-hooks-plus，让你的 Vue3 代码像 React Hooks 一样优雅！
是不是会问那什么是vue-hooks-plus？有什么用？没有这些也能应对日常开发？好接下就让我来带领大家来【认识】咱们的新朋友vue-hooks-plus！！！
1. 什么是 vue-hooks-plus？
vue-hooks-plus 是一个基于 Vue 3 Composition API 的 Hooks 工具库，提供了一系列常用的自定义 Hook，例如：
-
状态管理（
useState,useReducer） -
副作用管理（
useEffect,useDebounce,useThrottle） -
DOM 操作（
useClickOutside,useScroll） -
网络请求（
useRequest） -
生命周期增强（
useMount,useUnmount）
一句话：一个专为 Vue3 打造、对标 ahooks 的高性能 Hooks 库，全面覆盖基础 + 进阶场景，插件化扩展，TypeScript 优先。
接下就和大家唠唠 为什么会出来这个东东，解决什么问题！！
💡 核心痛点 & 解决方案
1. 逻辑复用困难（告别 Mixins 和高阶组件）
❌ 传统方式的问题：
-
Mixins 容易导致命名冲突，难以追踪数据来源
-
高阶组件（HOC） 嵌套过深，增加组件层级，影响性能
-
相同逻辑在不同组件重复编写，维护成本高
✅ vue-hooks-plus 的解决方案：
-
自定义 Hooks 封装逻辑，真正做到 “一次编写，多处复用”
-
无嵌套、无命名冲突，函数式调用，清晰可控
-
类似 React Hooks 的体验，但完全适配 Vue 3 响应式系统
示例：复用倒计时逻辑
// 定义 Hookconst useCountdown = (initialTime) => {const [time, setTime] = useState(initialTime);const start = () => {const timer = setInterval(() => {setTime((t) => (t > 0 ? t - 1 : 0));}, 1000);onUnmounted(() => clearInterval(timer));};return { time, start };};// 在任意组件使用const { time, start } = useCountdown(10);
2. 代码组织混乱（告别碎片化的 Options API）
❌ Options API 的问题：
-
data、methods、watch分散在不同位置，相关逻辑被割裂 -
组件稍复杂时，代码可读性急剧下降，维护困难
✅ vue-hooks-plus 的解决方案：
-
Composition API + Hooks，让相关逻辑集中管理
-
类似 React 的函数式编程风格，代码更紧凑、更易维护
对比示例：
// Options API（逻辑分散）export default {data() {return { count: 0 };},methods: {increment() { this.count++; },},mounted() { console.log('Mounted!'); },};// vue-hooks-plus（逻辑集中）export default {setup() {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);useMount(() => console.log('Mounted!'));return { count, increment };},};
3. 副作用管理复杂（自动清理，避免内存泄漏）
❌ 传统方式的问题：
-
手动管理
setInterval、addEventListener，容易忘记清理 -
防抖/节流代码重复编写，容易出错
✅ vue-hooks-plus 的解决方案：
-
useEffect自动清理副作用，避免内存泄漏 -
内置
useDebounce、useThrottle，减少重复代码
示例：自动清理的定时器
useEffect(() => {const timer = setInterval(() => {console.log('Running...');}, 1000);return () => clearInterval(timer); // 自动清理}, []);
示例：防抖搜索
const [keyword, setKeyword] = useState('');const debouncedKeyword = useDebounce(keyword, 500);watch(debouncedKeyword, (newVal) => {console.log('Search:', newVal); // 500ms 后触发});
4. 状态管理臃肿（减少对 Pinia/Vuex 的依赖）
❌ 传统状态管理的问题：
-
Pinia/Vuex 适合全局状态，但组件级状态管理显得笨重
-
小型状态逻辑也要写 Store，增加复杂度
✅ vue-hooks-plus 的解决方案：
-
useState、useReducer管理局部状态，轻量高效 -
结合
provide/inject，可实现轻量级状态共享
示例：组件级状态管理
const [state, setState] = useState({ count: 0 });const increment = () => setState({ count: state.count + 1 });
接下来就是重头戏 主推
🔥 useRequest 核心功能详解：Vue 中最强大的请求管理 Hook
useRequest 是 vue-hooks-plus 中最核心、最实用的 Hook 之一，专为 网络请求 场景设计，提供了 自动请求、轮询、缓存、错误重试、依赖刷新 等高级功能，大幅减少模板代码，让异步请求管理变得极其简单！
🚀 核心功能一览
| 功能 | 说明 |
|---|---|
| 自动请求 | 组件挂载时自动发送请求，无需手动调用 |
| 手动触发 | 支持 |
| 轮询 | 定时轮询数据（如实时监控场景） |
| 错误重试 | 请求失败时自动重试，可配置重试次数和间隔 |
| 缓存 | 内存缓存 & SWR（Stale-While-Revalidate）策略，减少重复请求 |
| 防抖/节流 | 避免频繁请求，优化性能 |
| 依赖刷新 | 依赖项变化时自动重新请求（类似 |
| 并行请求 | 支持 |
| 取消请求 | 可手动取消进行中的请求（如组件卸载时） |
| Loading 延迟 | 避免闪烁，支持延迟显示 Loading 状态 |
🎯 1. 基础用法（自动请求 + 状态管理）
import { useRequest } from 'vue-hooks-plus';// 用法 1：直接传入异步函数const { data, loading, error } = useRequest(() => fetch('/api/user'));// 用法 2：传入配置对象const { data: user } = useRequest('/api/user', {method: 'POST',body: JSON.stringify({ id: 1 }),});
返回值说明：
-
data：响应数据（ref类型） -
loading：请求状态（true/false） -
error：错误信息（null或Error对象） -
run：手动触发请求（同步，自动捕获错误） -
runAsync：手动触发请求（返回Promise，需自行处理错误）
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', // 缓存 + SWRretryCount: 3, // 错误重试loadingDelay: 200 // loading 防闪烁})
🎯 总结：vue-hooks-plus 的核心优势
| 特性 | 带来的好处 |
|---|---|
| 开箱即用的 Hooks | 减少重复代码，覆盖 90% 日常开发场景 |
| 极致的逻辑复用 | 告别 Mixins，代码更清晰、更易维护 |
| 自动副作用管理 | 避免内存泄漏，减少 Bug |
| 完美的 TS 支持 | 类型安全，开发更高效 |
| 轻量高性能 | 几乎不影响打包体积 |
| 高度可扩展 | 轻松封装自己的 Hooks，适应复杂业务需求 |
从安装到部署 3 分钟
安装
npm i vue-hooks-plus# 或pnpm add vue-hooks-plus
自动引入（推荐）
// vite.config.tsimport 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 转 Vue，却依然怀念 ahooks 的丝滑开发体验；
那么，vue-hooks-plus 就是你的终极解决方案！
它基于 Vue3 的 Composition API，提供 50+ 高质量 Hooks，覆盖 网络请求、DOM 操作、状态管理、副作用控制 等核心场景，让你：
✅ 少写 50% 重复代码，逻辑复用像搭积木一样简单
✅ 完美支持 TypeScript，类型提示清晰，开发更稳健
✅ 零学习成本，React Hooks 用户秒上手
✅ 极致轻量，仅 5KB，性能无负担
👉 现在就试试，彻底告别繁琐的 Vue3 开发！
GitHub: https://github.com/InhiblabCore/vue-hooks-plus
你会在项目里先用哪个 Hook？欢迎留言交流！ 💬
扫一扫
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
