Vue.js自定义防抖逻辑实现方法

本文深入解析了如何利用 Vue 3 的底层响应式 API `customRef` 实现真正“值级防抖”的响应式引用——不同于传统 `watch + setTimeout` 仅延迟副作用执行，`customRef` 能精准拦截 `ref` 的赋值过程，在 setter 中暂存新值、清除旧定时器并延迟更新内部状态，使组件中读取到的 `ref.value` 本身就是防抖后的稳定结果，天然适配 `v-model`、解构和组合式 API，同时提供可复用、可扩展（如支持立即执行、卸载清理）的 `useDebouncedRef` 工厂函数，是构建高性能交互体验（如搜索输入、实时过滤）的理想实践方案。

Vue 3 的 customRef 是一个底层响应式 API，允许你完全控制 ref 的 getter 和 setter 行为，非常适合实现带防抖、节流、懒加载等自定义逻辑的响应式数据。

为什么用 customRef 实现防抖比 watch + setTimeout 更合适？

直接在 watch 中用 setTimeout 只能监听变化并延迟执行副作用（比如发请求），但无法让响应式值本身“延迟更新”——用户输入时，ref.value 仍是实时变的。而 customRef 能拦截赋值过程，在 setter 中暂存新值、清除旧定时器、延迟触发真正的更新，从而让组件内读取到的值本身就是防抖后的结果。

一个可复用的防抖 ref 工厂函数

下面是一个通用的 useDebouncedRef 实现，接收初始值和防抖毫秒数：

import { customRef, nextTick } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout = null
  let currentValue = value

  return customRef((track, trigger) => ({
    get() {
      track() // 告诉 Vue 这个 ref 被读取了
      return currentValue
    },
    set(newValue) {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        currentValue = newValue
        trigger() // 通知依赖更新
      }, delay)
    }
  }))
}

在组件中使用示例

比如绑定搜索关键词输入框，只在用户停顿 300ms 后才更新搜索关键词：

<template>
  &lt;input v-model=&quot;debouncedKeyword&quot; placeholder=&quot;输入关键词...&quot; /&gt;
  <p>当前搜索词：{{ debouncedKeyword }}</p>
</template>

<script setup>
import { useDebouncedRef } from './useDebouncedRef'

const debouncedKeyword = useDebouncedRef('', 300)
</script>

注意：v-model 会自动读写 ref，所以它会正确触发 get 和 set，无需额外处理。

注意事项与增强点

• 初始值同步性：currentValue 初始化即生效，首次读取不会触发异步延迟
• 清理时机：组件卸载前应手动 clearTimeout(timeout)，可在 onBeforeUnmount 中补充（当前示例未包含，实际项目建议加上）
• 支持立即执行：可扩展参数，增加 immediate: boolean 控制首次输入是否立刻更新（需在 set 中判断）
• 兼容 ref 解构：返回的是 ref 对象，支持解构为 { value }，也支持 toRefs 等组合式 API

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue.js自定义防抖逻辑实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。