vue防抖 自定义ref实现输入框防抖_vue输入框防抖

}

}

> 
> 封装完每次使用的时候调用：
> 
> 
> 

       虽然效果实现了，但是每次使用都需要先引用，再使用debUpdata去调用一个真正的更新函数，如果所有输入框都需要加上防抖的话，就有点麻烦了，接下来咱们继续优化以上代码！！



> 
> 关于vue的ref到底是个什么东西呢
> 
> 
> 


![797e6973628c4211aadead9671b00dc9.jpeg](https://img-blog.csdnimg.cn/797e6973628c4211aadead9671b00dc9.jpeg)


         打印出来是一个RefImpl对象，对象里面有一个value，是通过Object.defineProperty来定义的，通过Object.defineProperty定义之后会产生一个get和set函数 具体可以参考一下[Object.defineProperty官方文档]( )  也就是说 vue 提供的ref方法源码里就包含着get以及set,在加上vue是响应式的，响应式的基本原理就是在get的时候进行依赖收集得知是谁用的了当前数据，而set则是派发更新，通俗讲就是通知之前使用的地方进行响应的更新。所以不妨可以大胆猜测一下，ref函数结构应该类似:

function ref(value) {
{
get(){
// 依赖收集 track()
return value;
},
set(val){
//派发更新 trigger()
value = val;
}
}
}

       如果要实现数据延迟更新，直接延迟数据更新，也就是相当于延迟ref里set派发更新不就可以了！ 那实现防抖难道还需要手动重写vue源码吗？那当然不是，vue为我们提供了一个自定义ref的入口，叫做[customRef]( ) ，可以自定义get和set的方法


![4e2f92f88a474c7b86c1b3955c3bd852.png](https://img-blog.csdnimg.cn/4e2f92f88a474c7b86c1b3955c3bd852.png)



> 
> 利用customRef声明函数debounceRef来自定义get和set
> 
> 
> 

import {customRef} from ‘vue’
export function debounceRef(value,delay=1000){
// return ref(value) //原始get set
return customRef(()=>{
return {
get(){
// 依赖收集 track()
return value;
},
set(val){
//派发更新 trigger()
value = val;
}
}
})
}

      首先 get 除了要返回值以外，还需要进行依赖收集 关于依赖收集 vue考虑到这一点了，他给我们传入了一个参数叫做track，track是一个方法，只要一调用这个方法就会自动进行依赖收集，而同事也传入了一个参数叫trigger，只要调用trigger方法，就会触发派发更新；



> 
>  ref 与自定义ref对比
> 
> 
> 


![9a935a7fa99b43b6a8a7fa4dbdd19bd9.jpeg](https://img-blog.csdnimg.cn/9a935a7fa99b43b6a8a7fa4dbdd19bd9.jpeg)



> 
> 全部代码
> 
> 
> 

import { customRef } from ‘vue’
export function debounceRef(value, delay = 1000) {
let timer;
// return ref(value) //原始get set
return customRef((track, trigger) => {
return {
get() {
// 依赖收集 track()
track();
return value;
},
set(val) {
clearTimeout(timer)
timer = setTimeout(() => {
//派发更新 trigger()
value = val;
trigger()
}, delay);
}
}
})
}

> 
> 使用方法
> 
> 
> 

{{ text }}

> 
> 前后对比感受一下！！
> 
> 
> 



**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/a26cc63cd561bacddc3c7c8c8ba0c5d9.png)
![img](https://img-blog.csdnimg.cn/img_convert/38c03cb273754770ac51f62e5b605910.png)
![img](https://img-blog.csdnimg.cn/img_convert/08565732c57cf661c7afadb59e929952.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
![img](https://img-blog.csdnimg.cn/img_convert/94c878874614908349e9a1eb345c3fab.png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
[外链图片转存中...(img-eG5dkP5c-1712865137372)]

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**