Vue3 又一新选择：VueHooks Plus 强势来袭！

最新推荐文章于 2024-08-09 07:00:14 发布

winty~~

最新推荐文章于 2024-08-09 07:00:14 发布

阅读量281

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649862155&idx=1&sn=26ac1a38c18a0074c210f3388c771eb9&chksm=f0b65f063c12eeb1a29f15b81383655cb093e4ec657a3bd16193f88aac42efbd61ae9aad1713&scene=126&sessionid=0

版权

前端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()],
  })