前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

哈喽，大家好 我是 winty。替代 VueUse，这一次我选择 VueHooks Plus！

在 Vue3 的浪潮中，Composition API 以其灵活和强大的能力，成为了前端开发中的一股新潮流。

然而，当 React 开发者转战 Vue3，他们可能会发现现有的 Hooks 库，如 VueUse，并不完全满足他们的需求。

今天，我们就来聊聊一个替代方案——VueHooks Plus。

从 React Hooks 到 Vue Hooks

作为一名从 React 转战 Vue 的开发者，我对 Hooks 的强大功能有着深刻的体会。

在 React 中，ahooks 是我经常使用的库，它丰富的功能让我在业务开发中游刃有余。

但在 Vue3 中，我发现 VueUse 的 useFetch 和 useAxios 功能相对单一，比如缺少一些 防抖、节流、轮循、缓存&SWR 等高级功能。

为了解决这个问题，我选择了 VueHooks Plus。

这是一个基于 Vue3 特性开发的 Hooks 库，它不仅包含了 ahooks 的所有功能，还提供了更多 Vue 特有的优化。

优势分析

就拿 useRequest Hooks 来说， VueHooks Plus 中提供了很多高级的功能，目前已有能力包括：

• 自动请求/手动请求：参数化配置控制请求自动、手动

• 轮询：轮询模式，定时触发请求

• 防抖：参数化配置，进入防抖模式

• 节流：参数化配置，进入节流模式

• 屏幕聚焦重新请求：在浏览器窗口 refocus 和 revisible 时，会重新发起请求

• 错误重试：通过参数配置指定错误重试次数，useRequest 在失败后会进行重试

• loading delay：延迟 loading 变成 true 的时间，有效防止闪烁

• 缓存：请求成功的数据缓存起来

• SWR(stale-while-revalidate)：如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求

• 滚动加载和分页加载：提供滚动加载和分页加载的能力

• 并行请求：赋予 useRequest 并行请求的能力

插件化能力支持

并且 useRequest 还支持外置扩展插件的功能，可以根据自己的需求来自定义插件，目前官方已经提供的插件能力有：

• 全局请求状态管理插件：充当所有请求的状态中间态，用户可以在中间态中对收集的请求结果进行操作。

• 同源跨窗口广播插件：相同来源的浏览器选项卡/窗口之间数据的广播和同步

当然，VueHooks Plus 还提供了很多其它的 Hooks 函数供大家使用，有兴趣的同学可以访问官网探索更多功能：https://inhiblabcore.github.io/docs/hooks/

VueHooks Plus：更全面的解决方案

使用简单快捷

npm 一键安装：

npm i vue-hooks-plus

提供多种引入方式，支持全量引入、按需引入：

// 全量引入
import { useRequest } from 'vue-hooks-plus'
// 按需引入
import useRequest from 'vue-hooks-plus/es/useRequest'

并且支持使用 unplugin-auto-import 插件自动引入：

npm i -D @vue-hooks-plus/resolvers

import AutoImport from 'unplugin-auto-import/vite'
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router'],
    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
    resolvers: [VueHooksPlusResolver()],
  })

高性能的逻辑封装

VueHooks Plus 以其高性能的逻辑封装而著称，它不仅提供了基础的 Hooks，还涵盖了高级的抽象封装，满足从简单到复杂的各种开发场景。

简洁易用的语法

VueHooks Plus 的语法设计简洁直观，易于理解和使用。无论是新手还是经验丰富的开发者，都能快速上手并融入到项目开发中。

TypeScript 支持

使用 TypeScript 构建的 VueHooks Plus 提供了完整的类型定义文件，这不仅增强了代码的可读性和可维护性，同时也确保了开发过程的类型安全。

交互式 Demo 演示

VueHooks Plus 提供了交互式 Demo 演示，让开发者能够直观地看到 Hooks 的使用效果和工作流程，极大地提高了学习效率。

服务器端渲染（SSR）支持

对于需要 SSR 的应用，VueHooks Plus 提供了友好的支持，确保了在服务器端渲染时的兼容性和性能。

基于插件模式的 useRequest

VueHooks Plus 的 useRequest 是基于插件模式设计的请求函数，它不仅支持基本的请求功能，还允许开发者通过插件扩展其功能，如自动刷新、防抖、节流等。

按需加载和包体积优化

VueHooks Plus 支持按需加载，这意味着开发者可以根据项目需求加载所需的 Hooks，从而优化最终的包体积，加快应用的加载速度。

丰富的 API 和配置项

useRequest 提供了丰富的 API 和配置项，包括但不限于请求触发方式、参数、成功和错误回调、以及高级功能如 loading delay 和 SWR 策略。

插件化：灵活的功能扩展

插件化是 VueHooks Plus 的一大亮点。开发者可以根据自己的需求，轻松地添加或修改插件，实现功能的定制化扩展。

VueHooks Plus 为我们提供了一个功能全面、灵活且易于使用的 Hooks 解决方案。如果你正在寻找一个能够提升开发效率和代码质量的工具，那么 VueHooks Plus 绝对值得一试。

• 参考链接：官方文档：https://inhiblabcore.github.io/docs/hooks/

往期推荐

大厂面试官：我理想中的前端

对话Svelte未来，Rust 编译器？构建大型应用?

收藏！史上最全 Vue 前端代码风格指南

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

前端Q

本公众号主要分享一些技术圈(前端圈为主)相关的技术文章、工具资源、学习资料、招聘信息及其他有趣的东西...

公众号

点个在看支持我吧