vue3中的customRef 实现防抖

最新推荐文章于 2025-04-29 11:40:14 发布

兜里揣着星星

最新推荐文章于 2025-04-29 11:40:14 发布

阅读量318

点赞数

CC 4.0 BY-SA版权

文章标签： vue3

本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/120298573

本文介绍了一个利用自定义Ref实现Vue中防抖功能的案例。通过创建一个名为myRef的函数，该函数返回一个定制的Ref对象，其set方法中应用了防抖策略，确保在输入值改变后等待一秒才更新同步到目标文本框。这种方法有助于优化性能，防止频繁的数据同步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例:

实现防抖效果\

即当在文本框中输入一个值,一秒后再对下面的文本框进行数据的同步

customRef 简陋的

Ref 精装的

			//自定义一个ref——名为：myRef
			function myRef(value,delay){
				let timer
				return customRef((track,trigger)=>{
					return {
						get(){
							console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
							track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
							return value
						},
						set(newValue){
							console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //通知Vue去重新解析模板
							},delay)
						},
					}
				})
			}