防抖（如果设定的时间到来之前，又一次触发了事件，就重新开始计时。
接下来debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，我将带大家一步步分析如何把input防抖做到极致，
首先需要把input 的双向绑定v-mode 拆开为 一个value 和一个input事件，在事件里注册一个函数 debUpdata，debUpdata里获取到input输入内容再赋值给text，这就类似于手写v-mode，代码如下：
<template>
<div class="hello">
<input :value="text" @input="debUpdata" />
<p>{
{ text }}</p>
</div>
</template>
<script>
<script setup>
import{
ref} from 'vue';
const text =ref('');
const debUpdata=(e)=> {
this.text = e.target.value;
}
</script>
具体防抖操作，就可以在debUpdata函数里进行操作，所谓防抖，无非就是让数据的变化延迟执行，所以在debUpdata内定义一个timer，每一次执行函数的时候先清空timer，然后在使用setTimeout 定时一秒之后，改变text的值，就实现了最基础的防抖。代码如下：
debUpdata(e) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.text = e.target.value;
}, 1000);
}
如果每次都需要写上这个函数去进行input防抖的话，多少有点麻烦，那具体怎么优化，抽离成单独的防抖函数呢？
新建debounce.js文件封装一个函数debounce
export function debounce(func, delay = 1000) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.call(this, ...args);
}, delay);
}
}
封装完每次使用的时候调用：
<template>
<div class="app">
<input :value="text" @input="debUpdata" />
<p>{
{
text }}</p>
</div>
</template>
<script setup>
import {
debounce } from "./debounce";
import{
ref} from 'vue';
const text=ref('');
const update=(e)=>(text.value=e.target.value);
const debUpdata=debounce(update,1000);
</script>
虽然效果实现了，但是每次使用都需要先引用，再使用debUpdata去调用一个真正的更新函数，如果所有输入框都需要加上防抖的话，就有点麻烦了，接下来咱们继续优化以上代码！！
关于vue的ref到底是个什么东西呢
打印出来是一个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的方法
利用customRef声明函数debounceRef来自定义get和set
```js
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对比
全部代码
```js
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);
}
}
})
}
>使用方法
```js
<template>
<div class="app">
<input v-model="text" />
<p>{
{ text }}</p>
</div>
</template>
<script setup>
import { debounceRef } from "./ref";
const text=debounceRef('');
</script>
前后对比感受一下！！
