使用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函数实现了防抖操作