在vue中定义一个防抖ref

背景

在vue的开发过程中，我们通常会使用到ref，但在我们需要对一个频繁的赋值操作做防抖操作时，我们通常只能通过编写一个独立的防抖函数来实现，这样相对会多一些步骤（麻烦一些）。例如我们给一个即时搜索框的input实现防抖输入（即在输入文本n秒之后才触发搜索，避免频繁请求后端接口浪费资源）时，我们不仅不能使用v-model，而且还要定义一个input事件和防抖函数，非常之繁琐。

此时，我有一个简洁的方法，就是我们可以自定义一个带有防抖功能的ref函数来实现给响应式数据赋值时就实现防抖，这样不仅可以直接使用v-model来实现实时更新，而且不需要再编写任何方法。

原理

在vue中，ref函数其实就是创建了一个代理对你定义的一个变量的操作进行拦截和更新。在vue3中，提供了一个customRef方法，这个方法可以自定义一个ref函数，我们只需要对这个ref函数进行小小的改造即可实现我们想要的效果。

实现

// utils/helper.ts
import { customRef } from "vue";

export const debounceRef = (value: any, duration: number = 500) => {
    return customRef((track, trigger) => {
        let timeout: any;
        return {
            get() {
                track();
                return value;
            },
            set(newValue) {
                clearTimeout(timeout);
                // 延迟派发更新
                timeout = setTimeout(() => {
                    value = newValue;
                    trigger();
                }, duration);
            }
        }
    })
}

使用

使用方式与原版ref无异，只是我们自定义的ref能实现防抖功能

import { debounceRef } from '@/utils/helper'

const value: string = debounceRef("")