Vue 3.x customRef se da cuenta de respuesta variable anti-vibración

1. Escribe una función anti-vibración

function useDebouncedRef(value,delay=500){
    
    
    let timeout=null
    //customRef 参数是一个工厂函数，返回get和set方法
    return customRef((track,trigger)=>{
    
    //track，trigger用来监听追踪和触发依赖的
        return {
    
    
            get(){
    
    
                track()
                return value
            },
            set(newVal){
    
    
                clearTimeout(timeout)
                timeout=setTimeout(()=>{
    
    
                    value=newVal
                    trigger()
                },delay)
            }
        }
    })
}

2. Introducir y utilizar

<template>
    <div>
        <input v-model="text" />
    </div>
</template>
<script>
import {
    
     watch} from 'vue'
import {
    
    useDebouncedRef} from '@/compositionApi/index.js'
export default {
    
    
    setup(){
    
    
        let text=useDebouncedRef('')
        watch(()=>text.value,(val)=>{
    
    
            console.log(val)
        })
        return{
    
    
           text
        }
    }
}
</script>