“每次写 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 之一，专为 网络请求 场景设计，提供了 自动请求、轮询、缓存、错误重试、依赖刷新 等高级功能，大幅减少模板代码，让异步请求管理变得极其简单！
🚀 核心功能一览
| 功能 | 说明 |
|---|---|
| 自动请求 | 组件挂载时自动发送请求，无需手动调用 |
| 手动触发 | 支持 run 或 runAsync 手动执行请求 |
| 轮询 | 定时轮询数据（如实时监控场景） |
| 错误重试 | 请求失败时自动重试，可配置重试次数和间隔 |
| 缓存 | 内存缓存 & SWR（Stale-While-Revalidate）策略，减少重复请求 |
| 防抖/节流 | 避免频繁请求，优化性能 |
| 依赖刷新 | 依赖项变化时自动重新请求（类似 watch + refetch） |
| 并行请求 | 支持 Promise.all 风格的并行请求管理 |
| 取消请求 | 可手动取消进行中的请求（如组件卸载时） |
| 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', // 缓存 + SWR retryCount: 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: github.com/InhiblabCor…
你会在项目里先用哪个 Hook？欢迎留言交流！ 💬
编辑
