自定义防抖ref

import { customRef } from "vue"

export function debounceRef(value,duration = 1000){
    let timer 
    return customRef((track,trigger)=>{
        return {
            get(){
                // 收集依赖
                track()
                return value
            },
            set(val){
                // 派发更新
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    trigger()
                    value = val
                },duration)
            }
        }
    })
    
}

页面调用

<script setup>
import {debounceRef} from './debounceRef'
const text = debounceRef('')
</script>

<template>
    <input type="text" v-model="text">
    <div>{{ text }}</div>
</template>

效果演示

该 ref 只会在1s后显示最终结果