使用customRef实现防抖


customRef函数

创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制

它需要一个工厂函数,该函数接收track和trigger函数作为参数

并且返回一个带有get和set的对象

在进行双向数据绑定的时候,输入框输入的内容与下方文字显示的内容是同步变化的



可以使用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定义变量



 此时就使用customRef函数实现了防抖操作