使用customRef实现防抖
customRef函数
创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制
它需要一个工厂函数,该函数接收track和trigger函数作为参数
并且返回一个带有get和set的对象
在进行双向数据绑定的时候,输入框输入的内容与下方文字显示的内容是同步变化的
"text" v-model="input">{{input}}
可以使用vue提供的customRef函数实现防抖操作
自定义个一个文件debounce.js
import { customRef } from "vue";
export default function(value){
let time=null
return customRef((track,trigger)=>{
return {
get(){
track()
return value
},
set(newValue){
clearTimeout(time)
time=setTimeout(()=>{
value=newValue
trigger()
},1000)
}
}
})
}
使用的使用引入这个文件,不在使用ref定义变量
"text" v-model="input">{{input}}
此时就使用customRef函数实现了防抖操作