Vue极致防抖

一般来说在Vue(3)中做防抖可以这样写：

export function debounce(fun, delay = 1000) {
    let timer;
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(() => {
            fun.call(this, ...args)
        }, delay)
    }
}

<script setup>
import {ref} from 'vue'
import {debounce} from "../plugins/debounce.js";

const text = ref('')
const update = e => {
    text.value = e.target.value
}

const updateText = debounce(update, 1000)
</script>

<template>
    <input type="text" :value="text" @input="updateText">
    <div>{{ text }}</div>
</template>

为了更好的优化代码：可以使用customRef（自定义ref）：

import {customRef} from "vue";

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

<script setup>
import {debounceRef} from '../plugins/debounceRef.js'

const text = debounceRef('')
</script>

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