当前位置: 首页 > news >正文

小技巧1,在vue3中利用自定义ref实现防抖(customRef)

文章目录

    • 提出问题
    • 常规实现方案
    • customRef
    • 技巧型实现方案
    • 小结

提出问题

在vue中如何去使用防抖呢?
或者说,在vue中如何去使用防抖最舒服呢?

看以下这个输入框,其实所谓的防抖呢,实际上就是输入完后,我希望当我停下来一段时间后,数据才真正的响应
在这里插入图片描述
在这里插入图片描述

常规实现方案

那么我们用常规方法来实现下这个防抖

<script lang="ts" setup>
import { ref } from 'vue' 
import { debounce } from 'lodash-es'
const text = ref('')const inputHandle = (e: any) => {text.value = e.target.value
}const debounceHandler = debounce(inputHandle, 2000)
</script><template><input @input="debounceHandler" /><p> {{ text }} </p>
</template>

代码其实很简单,但是其实有点繁琐了,当然功能是没任何问题的
我要先导入ref,再导入debounce一个工具函数
然后写一个目标函数,再一段时间后去响应这个值
就这样写了一堆,要是个别地方使用其实还好,但是很多地方都要使用,就感觉有点臃肿了

customRef

在 Vue 3 中,customRef 是一个用于创建自定义响应式引用的 API。它允许开发者更细粒度地控制响应式引用的行为,特别是在需要进行特殊的响应式处理时。

  • 什么是 customRef?
    customRef 接受一个工厂函数,返回一个包含 get 和 set 方法的响应式引用。这使得开发者可以定义如何获取和设置值,同时还能决定如何通知依赖的变化。

  • 适用场景
    需要自定义响应式行为,例如延迟更新、节流、去抖等。
    在性能优化中,通过控制响应式值的更新频率来减少不必要的计算。

技巧型实现方案

废话不多说,技巧型方案就是借用customRef来实现的,那么最终代码有多简洁呢???

// 写一个format.ts文件
import { customRef } from 'vue'export const debounceRef = (value: any, delay: number) => {let timeoutId: any = nullreturn customRef((track, trigger) => ({get() {track() // 追踪依赖return value},set(newValue) {// 使用 setTimeout 来延迟更新clearTimeout(timeoutId)timeoutId = setTimeout(() => {value = newValuetrigger() // 派发更新}, delay) // 1秒延迟}}))
}
<script lang="ts" setup>
import { debounceRef } from './format'
const text = debounceRef('', 2000)
</script><template><input v-model="text" /><p> {{ text }} </p>
</template>

最后实现结果,功能上和常规方案上一摸一样的,但是代码上十分简洁,虽然封装了一个debounceRef,但是对于如果很多地方上使用的话,这样写无疑会更好点
在这里插入图片描述
在这里插入图片描述

小结

其实这个方法呢就是借用vue3的customRef Api实现,那么对于vue2有吗?
vue2是没有的,对于vue2如果需要实现,需要使用 Vue 的数据观察和自定义事件机制,或者通过计算属性和方法的组合来实现

最后这里只是多介绍一种方案实现,至于这个技巧方案好不好用,因人而异吧,有些人喜欢,有些人不喜欢,但不管怎样,多一种实现方案总归是好的。。。

http://www.xdnf.cn/news/79687.html

相关文章:

  • 晨控CK-FR12与欧姆龙NX系列PLC配置EtherNet/IP通讯连接操作手册
  • C++_并发编程_thread_01_基本应用
  • LoRA微调技术全景解析:大模型高效适配的革新之道
  • 【RuleUtil】适用于全业务场景的规则匹配快速开发工具
  • ffmpeg 硬解码相关知识
  • spark-SQL实验
  • 川翔云电脑32G大显存集群机器上线!
  • 进阶篇 第 6 篇:时间序列遇见机器学习与深度学习
  • 考研单词笔记 2025.04.22
  • 安宝特科技 | AR眼镜在安保与安防领域的创新应用及前景
  • 企业战略到数字化落地 —— 第三章 数字化架构
  • 快速定位达梦缓存的执行计划并清理
  • 基于大疆行业无人机的特色解决方案-无线通信篇:基于蜂窝以及自组网MESH的无线通信C2链路
  • Web3实战:从零开发你的ERC20代币合约
  • 在 master 分支上进行了 commit 但还没有 push,怎么安全地切到新分支并保留这些更改
  • 使用 LangChain + Higress + Elasticsearch 构建 RAG 应用
  • WebRTC服务器Coturn服务器中的通信协议
  • 进阶篇 第 2 篇:自相关性深度解析 - ACF 与 PACF 图完全指南
  • 云原生--基础篇-3--云原生概述(云、原生、云计算、核心组成、核心特点)
  • 2025.04.22【Sankey】流图分析技巧与应用
  • 设备制造行业如何避免项目管理混乱?
  • 【人脸识别】百度人脸识别H5方案对接
  • 表格识别版面还原分析-GO语言集成-表格文字识别接口
  • AutoJs相关学习
  • 国家自然科学基金答辩ppt制作案例模板下载
  • jsconfig.json文件的作用
  • 优化提示词方面可以使用的数学方法理论:信息熵,概率论 ,最优化理论
  • Android Studio开发 SharedPreferences 详解
  • 联易融受邀参加上海审计局金融审计处专题交流座谈
  • Linux进程6-alarm闹钟定时终止、raise发送信号、abort终止、pause挂起进程验证