自定义响应式逻辑，实现搜索框防抖技巧

本文深入解析了如何利用 Vue 3 的 `customRef` 实现高性能搜索框防抖，揭示其相比传统 `watch + setTimeout` 方案的核心优势：通过手动控制依赖追踪（track）与更新触发（trigger）的时机，让输入过程完全静默——中间所有变化不触发计算属性重算、模板重渲染或任何响应式副作用，仅在防抖结束、值真正稳定时才精准通知更新，从而显著提升应用响应效率与用户体验；文中还提供了开箱即用的 `debounceRef` 工具函数、组件集成示例及内存泄漏防护、立即执行、手动取消等实用增强方案，是构建流畅搜索交互的进阶实践指南。

用 customRef 实现搜索框防抖，核心是**绕过 Vue 默认的响应式追踪机制，手动控制依赖收集与触发更新**，从而在防抖期间不触发视图重渲染。它比用 watch + setTimeout 更精准——只让最终值响应，中间输入完全不触发副作用。

为什么 customRef 比 ref + watch 更适合防抖？

customRef 允许你定义 track（谁读取时收集依赖）和 trigger（谁修改时通知更新）的时机。防抖场景下，你可以： - 输入时只 track（让组件能读取当前值），但不 trigger； - 防抖结束、值真正变化时，才调用 trigger，通知组件更新。 这样，中间几十次输入不会引发任何计算属性重新求值或模板重新渲染。

手写一个 debounceRef 工具函数

以下是一个可复用的防抖响应式引用实现：

（Vue 3 Composition API 环境）

import { customRef, nextTick } from 'vue'
<p>export function debounceRef(value, delay = 300) {
let timeout = null
return customRef((track, trigger) => {
return {
get() {
track() // 告诉 Vue：当前副作用依赖这个 ref
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger() // 值稳定后，才通知更新
}, delay)
}
}
})
}</p>

在组件中使用 debounceRef

直接替换普通 ref，无需额外 watch 或事件处理逻辑：

import { defineComponent } from 'vue'
import { debounceRef } from './debounceRef'
<p>export default defineComponent({
setup() {
// 创建带 500ms 防抖的响应式搜索关键词
const keyword = debounceRef('', 500)</p><pre class="brush:php;toolbar:false"><code>// 这个计算属性只在防抖结束后才重新执行
const filteredList = computed(() => {
  return list.value.filter(item =>
    item.title.includes(keyword.value)
  )
})

return () => (
  &lt;div&gt;
    &lt;input 
      v-model={keyword.value} 
      placeholder="输入搜索关键词..." 
    /&gt;
    &lt;ul&gt;
      {filteredList.value.map(item => (
        &lt;li key={item.id}&gt;{item.title}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  &lt;/div&gt;
)</code>

} })

✅ 效果：用户快速连打 “reactive”，只有最后停顿 500ms 后，filteredList 才重新计算并更新列表；中间所有输入都不触发任何响应式副作用。

注意事项与增强建议

• 避免内存泄漏：组件卸载前需清理未执行的定时器。可在 onBeforeUnmount 中 clearTimeout(timeout)，或改用 onInvalidate（Vue 3.4+ 支持）自动清理；
• 支持立即执行：如需首次输入立刻触发（比如“回车立即搜”），可在 set 中加判断，对空→非空或特定按键做即时 trigger；
• 暴露 cancel 方法：返回对象可扩展 cancel() 方法，方便手动中断防抖（例如切换 tab 时清空待执行逻辑）；
• 搭配 useDebounceFn 更灵活：若逻辑复杂（如要发请求），建议用 useDebounceFn 封装函数，再配合普通 ref 控制状态，比全包在 customRef 里更易测试和复用。

本篇关于《自定义响应式逻辑，实现搜索框防抖技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！