VueUse使用及造轮子选择对比示例详解
目录
- 前言
- 问题
- ♂️ 解决
- 更多
前言
想想一名React开发开发Vue是什么体验。就在今天初含泪写多一个vue项目，不是转，是写多！选用的是vue3+vite开发。Composition API 让我得心应手。
之前react开发选的是react16，ahooks是我接触最多的hooks库了，很贴合我的业务。在使用vue3的时候开发的时候选取了 vueuse 。
问题
在前端开发中和请求打交道是最多的，大多数业务都是restful api架构，我们拿到数据做处理，当前流行的框架配备着状态机制，在依赖变化时进行重新请求等。 vueuse 中的 useFetch 和 useAxios 是作为请求的 hook。
useFetch功能比较单一，只有请求体的一些基本功能。useAxios 更多基于axios内置功能的封装，业务中的依赖刷新，防抖，节流，缓存等功能都没有的。
这里就有小伙伴问了，那你在 useAxios上封装这些节流防抖功能就好了，先不说需要侵入式的修改这个钩子，它仅支持axios，万一项目变成request呢?
♂️ 解决
ahooks 是前端界大名鼎鼎的 react 的 hooks，它含有更加丰富的功能，能贴合我们更多的业务，其中的 useRequest 是满足我的需求的，但苦于没有vue版本，于是我觉得自己开发一版基于vue3特性的useRequest 。它具备了ahooks的所有功能：
- 自动请求/手动请求
- 轮询
- 防抖
- 节流
- 屏幕聚焦重新请求
- 错误重试
- loading delay
- SWR(stale-while-revalidate)
- 缓存
- 插件式
const {
loading: Ref<boolean>,
data?: Ref<TData>,
error?: Ref<Error>,
params: Ref<TParams || []>,
run: (...params: TParams) => void,
runAsync: (...params: TParams) => Promise<TData>,
refresh: () => void,
refreshAsync: () => Promise<TData>,
mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
cancel: () => void,
} = useRequest<TData, TParams>(
service: (...args: TParams) => Promise<TData>,
{
manual?: boolean,
defaultParams?: TParams,
onBefore?: (params: TParams) => void,
onSuccess?: (data: TData, params: TParams) => void,
onError?: (e: Error, params: TParams) => void,
onFinally?: (params: TParams, data?: TData, e?: Error) => void,
...高级功能，更多请见文档
}
);
这个useRequest 请求体允许传入任意promise对象，所以它并不限制是axios还是request,并且功能都是一致的。
如果想使用请求库的一些特定功能，我们可以封装那些特定功能成为useRequest的插件，可以控制在它的生命周期中调用。
所以它既体现出包容性又体现出对于单个个体特殊功能的接纳。
插件化的使用
<template>
<div>{{ data?.name ?? '-' }}</div>
<div>{{ data?.age ?? '-' }}</div>
</template>
<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus'
import { Plugin } from '../../../types'
// 插件
const useFormatter: Plugin<
{
name: string
age: number
},
[]
> = (fetchInstance, { formatter }) => {
return {
onSuccess: () => {
fetchInstance.setData(formatter(fetchInstance.state.data), 'data')
},
}
}
function getUsername(): Promise<{ name: string; age: number }> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'yong_git',
age: 18,
})
}, 1000)
})
}
const { data } = useRequest(
() => getUsername(),
{
formatter: () => {
return {
name: 'plugins update',
age: 20,
}
},
},
[useFormatter]
)
</script>
上面实现了一个formatter返回结果的插件，它在请求完成的时候return {name: 'plugins update',age: 20,} 覆盖了请求的结果，更多详情请见文档。
下面是我基于ahooks实现的vue的hooks库 vue-hooks-plus，收获很多，框架的机制所体现出来的独特性让人眼前一亮
相关推荐
-
Vue新玩具VueUse的具体用法
目录 前言 什么是 VueUse 简单上手 还有我们熟悉的 防抖 和 节流 还还有全局状态共享的函数 更多 前言 上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库. 好奇了一下,点看看了看.好家伙啊, 我直接好家伙.这不就是曾经我也想自己写一个 vue 版的 hooks 库吗?(因为我觉得 vue3 和 hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bi
-
5个可以加速开发的VueUse函数库(小结)
目录 VueUse 有哪些实用程序? 将 VueUse 安装到你的 Vue 项目中 1.useRefHistory 跟踪响应式数据的更改 2.onClickOutside 关闭模态 3.useVModel 简化了 v-model 绑定 4.使用InterpObserver 跟踪元素可见性 5.useTransition 在值之间缓和 最后的想法 VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Compositio
-
vue前端框架vueuse的useScroll函数使用源码分析
目录 引言 1.示例 2.源码解析 2.1 参数解析 2.2 响应式状态定义 2.3 onScrollEnd滚动结束回调 2.4 onScrollHandler滚动处理 2.5 使用 useEventListener监听滚动事件 2.6 返回值 3.总结 引言 页面很多时候都含有可滚动视图区域,可能是横向滚动也可能是纵向滚动. 有时我们需要知道当前的滚动方向,是向左还是向右,是向上还是向下: 有时需要知道当前是否是正在滚动,如果滚动则显示一个加载动画等: 有时我们还需要知道滚动条是否已经滚动到了
-
VueUse功能精简你的dependencies
目录 引言 使用前安装 网页全屏 剪切板 取色器 拖拽元素 本地缓存 其他 安全区域 动态修改favicon 引言 VueUse是一个基于Composition API的实用函数集合,支持Vue2和Vue3,使用它可以帮助我们快速实现日常开发中一些常见的需求.本文将分享列举几个常见的需求来通过VueUse实现,让大家感受其魅力! 使用前安装 Vue3: npm i @vueuse/core --save Vue2 的话还需要额外安装 @vue/composition-api npm i @vue
-
Vue3+vueuse实现放大镜示例详解
目录 前言 准备工作 功能实现 完整实现代码 结束语 前言 给大家带来一种潮流的方式,实现放大镜效果,安排
-
VueUse使用及造轮子选择对比示例详解
目录 前言 问题 ♂️ 解决 更多 前言 想想一名React开发开发Vue是什么体验.就在今天初含泪写多一个vue项目,不是转,是写多!选用的是vue3+vite开发.Composition API 让我得心应手. 之前react开发选的是react16,ahooks是我接触最多的hooks库了,很贴合我的业务.在使用vue3的时候开发的时候选取了 vueuse . 问题 在前端开发中和请求打交道是最多的,大多数业务都是restful api架构,我们拿到数据做处理,当前流行的框架配备
-
Go语言数据结构之选择排序示例详解
目录 选择排序 动画演示 Go 代码实现 总结 选择排序 选择排序(selection sort)是一种原地(in-place)排序算法,适用于数据量较少的情况.由于选择操作是基于键值的且交换操作只在需要时才执行,所以选择排序长用于数值较大和键值较小的文件. 思想: 对一个数组进行排序,从未排序的部分反复找到最小的元素,并将其放在开头. 给定长度为 nnn 的序列和位置索引i=0 的数组,选择排序将: 遍历一遍序列,寻找序列中的最小值.在 [i...n−1] 范围内找出最小值 minValue
-
RocketMQ消息生产者是如何选择Broker示例详解
目录 前言 从NameServer查询Topic信息 如何选择Broker 小结 前言 在RocketMQ中为,我们创建消息生产者时,只需要设置NameServer地址,消息就能正确地发送到对应的Broker中,那么RocketMQ消息生产者是如何找到Broker的呢?如果有多个Broker实例,那么消息发送是如何选择发送到哪个Broker的呢? 从NameServer查询Topic信息 通过Debug消息发送send()方法,我们最终可以定位到DefaultMQProducerImpl.sen
-
Flutter实现自定义下拉选择框的示例详解
在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选.单选.列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以最好我们可以自己做一个,这样即使扩展我们也会得心应手. 先看效果图: 关键点:弹出.收回动画.状态改变.选项联动 思路: 我们可以看到一个完整的下拉框有头部和具体的下拉选项两部分组成,头部又和下拉组进行了联动, 把头部当做1个数组,下方选项作为1个数组,两个数组数量一致之间形成一个完整的下拉选择框可以更好的控制联动效
-
xxl-job对比ElasticJob使用示例详解
目录 1. xxl-job 2. 运行 xxl-job 3. 开发定时任务 3.1 项目创建及配置 3.2 定时任务开发方式 3.2.1 BEAN 模式(类形式) 3.2.2 BEAN模式(方法形式) 3.2.3 GLUE 模式(Java) 4. 小结 1. xxl-job 松哥也在微信群里和小伙伴们讨论过各自到底用的是 xxl-job 还是 ElasticJob,讨论的结果就是,xxl-job 使用的人更多一些. 不说功能的优劣,我们单纯从数据上其实就能看出一些端倪: 这是 xxl-job 的
-
创建图片对比slider滑块示例详解
目录 引言 CSS JavaScript 定义 HTML 结构 定义 CSS 样式 实际代码 引言 在这篇文章, 我们会创建一个 slider 滑块来对比两张图片. 老样子,话不多说,先看效果. CSS .container { position: relative; } .resizer { background-color: #cbd5e0; cursor: ew-resize; height: 100%; left: 50%; position: absolute; top: 0; wid
-
python数据可视化使用pyfinance分析证券收益示例详解
目录 pyfinance简介 pyfinance包含六个模块 returns模块应用实例 收益率计算 CAPM模型相关指标 风险指标 基准比较指标 风险调整收益指标 综合业绩评价指标分析实例 结语 pyfinance简介 在查找如何使用Python实现滚动回归时,发现一个很有用的量化金融包--pyfinance.顾名思义,pyfinance是为投资管理和证券收益分析而构建的Python分析包,主要是对面向定量金融的现有包进行补充,如pyfolio和pandas等. pyfinance包含六个模块
-
C语言实现栈的示例详解
目录 前言 一. 什么是栈 二. 使用什么来实现栈 三. 栈的实现 3.1 头文件 3.2 函数实现 3.3 完整代码 四. 栈的用处 前言 前一段时间,我们试着用C语言实现了数据结构中的顺序表,单链表,双向循环链表.今天我们再用C语言来实现另一种特殊的线性结构:栈 一. 什么是栈 栈(stack)又名堆栈,它是一种运算受限的线性表.限定仅在表尾进行插入和删除操作的线性表.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新元素放到栈顶元素的上面,使之成
-
.NetCore实现上传多文件的示例详解
本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞:由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧: form方式上传一组图片 先来看看咋们html的代码,这里先简单说下要上传文件必须要
-
python机器学习创建基于规则聊天机器人过程示例详解
目录 聊天机器人 基于规则的聊天机器人 创建语料库 创建一个聊天机器人 总结 还记得这个价值一个亿的AI核心代码? while True: AI = input('我:') print(AI.replace("吗", " ").replace('?','!').replace('?','!')) 以上这段代码就是我们今天的主题,基于规则的聊天机器人 聊天机器人 聊天机器人本身是一种机器或软件,它通过文本或句子模仿人类交互. 简而言之,可以使用类似于与人类对话的软件进