创建自定义ref实现防抖效果

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

<script>
import { customRef } from '@vue/reactivity';
export default {
    name: "App",
    setup() {
        // 自定义ref函数
        function myRef(value,delay){
            // 接收定时器
            let timer;
            // 返回一个customRef创建的自定义ref
            return customRef((track,trigger)=>{
                return {
                    // 读取数据时调用
                    get(){
                        // 通知vue追踪value的变化
                        track();
                        return value;
                    },
                    // 更改数据时调用
                    set(newValue){
                        // 清除定时器
                        clearTimeout(timer);
                        // 创建定时器
                        timer=setTimeout(()=>{
                            // 接收新的值
                            value=newValue;
                            // 通知vue重新解析模板
                            trigger();
                        },delay)
                    }
                }
            })
        }

        let keyWord=myRef('hello',500);

        return {
            keyWord
        }
    }
};
</script>