【Vue】自定义ref实现防抖

代码

<template>
    <div class="container">
        <input type="text" v-model="text" />
        <p class="result">{{text}}</p>
    </div>
</template>

<script setup>
    import { customRef } from "vue";
    function debounceRef(value, delay = 1000) {
        return customRef((track, trigger) => ({
            get value() {
                // 依赖收集
                track();
                return value;
            },
            set value(val) {
                // 派发更新
                trigger();
                value=val;
            }
        }));
    }
    const text = debounceRef("", 1000);
</script>

<style scoped>
    .container {
        width: 80%;
        margin: 1em auto;
    }

    .result {
        color: #333;
    }

    .container input {
        width: 100%;
    }
</style>

参考资料

• Vue3-customRef()