如何创建一个带防抖的响应式变量

Hello馒头儿2025-06-24 15:33

如何创建一个带防抖的响应式变量

在以往的开发中，用到输入框对后台进行查询时，每次都要去引入一个debounce，有没有觉得很烦的，本来import写的就多，眼花缭乱的，偶然间看到vue3支持创建一个自定义的响应式变量，那么思考是否可以自己写一个自定义的在声明时就带响应式呢。

实现

核心就是如何利用customRef方法，在写入数据的时候，来塞入一个防抖逻辑，话不多说往下看。

创建一个hook函数文件useDebounceRef.js

js 复制代码

import {customRef} from "vue";

/**
 * 防抖函数逻辑
 */
export function debounce(fnc, wait) {
    let timer = null;
    return function (...arg) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fnc.apply(this, arg);
        }, wait);
    };
}

/**
 * 创建一个带防抖的响应式变量
 */
export const useDebounceRef = (value, delay = 500) => {
    let timer = null; // 声明一个定时器变量
    return customRef((track, trigger) => {
        return {
            get() {
                track() // 收集
                return value
            },
            set(newVal) {
            // 防抖逻辑
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    trigger() // 派发
                    value = newVal
                }, delay);
            }
        }
    })
}

怎么样，是不是简简单单，这样我们就不用每次都要去引入防抖函数啦，但是节流可千万别这样，因为节流的机制问题，如果延时修改，会导致老数据覆盖新数据的bug，切记切记，有不同意见方案的，欢迎评论区留言，记得点个赞哦！！！