Vue3实现输入框防抖的ref教程

本文深入解析了 Vue 3 中如何利用高级响应式 API `customRef` 实现输入框防抖功能，不仅揭示了其背后依赖追踪（track）与更新触发（trigger）的核心机制，还提供了一个简洁、健壮、可复用的 `useDebouncedRef` 工具函数——它通过手动管理定时器，在用户停止输入指定延迟后才真正更新值并通知视图刷新，既保障了响应式体验的无缝衔接，又避免了高频输入导致的性能浪费和副作用；无论你是想夯实 Vue 响应式原理，还是急需一个生产可用的防抖方案，这篇文章都给出了清晰、准确且落地的实践答案。

customRef 是什么，为什么用它做防抖

Vue 的 customRef 是一个高级响应式 API，允许你完全控制 ref 的 getter 和 setter 行为。它不像 ref() 那样自动追踪依赖，而是把响应式逻辑交给你自己写——这正好适合实现「输入防抖」：在用户停止输入一段时间后才更新值，同时保持模板中绑定的响应式行为不变。

核心思路：用 setTimeout 控制 setter，用 clearTimeout 清除旧任务

关键不是“延迟赋值”，而是“延迟触发响应式更新”。每次输入都重置定时器，只有最后一次输入的定时器真正执行 setter，从而触发视图更新和依赖收集。

• 在 customRef 的工厂函数中，声明一个变量存定时器 ID（如 let timer = null）
• getter 直接返回当前值（保持读取正常）
• setter 接收新值后，先清除上一次定时器，再设置新定时器，在延迟后才真正赋值并调用 trigger()
• 必须调用 track()（读时）和 trigger()（写时），否则 Vue 不知道要更新谁

手写防抖 ref 的完整代码（Vue 3 Composition API）

下面是一个可直接复用的 useDebouncedRef 工具函数：

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 300) {
  let timeout = null
  return customRef((track, trigger) => {
    return {
      get() {
        track() // 告诉 Vue：这里被读取了，需要建立依赖
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() // 告诉 Vue：值变了，该更新依赖了
        }, delay)
      }
    }
  })
}

在组件中这样用：

import { useDebouncedRef } from './useDebouncedRef'

export default {
  setup() {
    const searchQuery = useDebouncedRef('', 500)

    return {
      searchQuery
    }
  }
}

模板里照常绑定：<input v-model="searchQuery" />，输入会自动防抖生效。

注意事项和常见坑

• 不要在 setter 里直接调用 trigger() —— 必须等延迟结束后才调，否则防抖失效
• 记得清空定时器，否则快速连输会累积多个定时器，导致多次不必要更新
• 组件卸载前要清理定时器（Vue 3 中 onBeforeUnmount 可加 clearTimeout(timeout)，避免内存泄漏）
• 如果需要「立即执行首次输入」或「取消防抖」，可在函数中扩展参数，比如加 immediate: true 逻辑

今天关于《Vue3实现输入框防抖的ref教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！