Vue响应式数据customRef怎么写？手把手教你实现输入框防抖
customRef 是什么，为什么用它做防抖
说到 Vue 3 的响应式系统，ref() 和 reactive() 大家都很熟悉了。但今天要聊的 customRef，算是个“隐藏高手”。它本质上是一个高级 API，把响应式数据的“生杀大权”——也就是 getter 和 setter 的控制逻辑——完全交到了开发者手里。这意味着什么？意味着你可以自定义依赖追踪和更新触发的时机。这不正是实现“输入防抖”的绝佳场景吗？用户连续输入时，我们并不希望每次按键都立刻触发搜索或更新，而是等他停下来一会儿再行动。customRef 让你能精准地控制这个“停下来”的时机，同时保持模板绑定的简洁性，两全其美。
核心思路：用 setTimeout 控制 setter，用 clearTimeout 清除旧任务
这里有个关键点需要先厘清：防抖的核心目标，并非“延迟赋值”，而是“延迟触发响应式更新”。换句话说，值可以变，但通知视图和计算属性更新的动作，得等一等。实现的秘诀，就在于那个经典的“重置定时器”模式：每一次新的输入，都意味着上一次的等待作废，我们需要清除旧的定时器，重新开始计时。只有最后一次输入后的定时器能顺利执行，从而真正地更新数据并触发响应。
具体到 customRef 的实现里，你需要把握这几个环节：
- 在工厂函数内部，需要一个变量（比如
timer）来保存定时器的 ID，方便后续清除。 - getter 的逻辑相对直接：返回当前值，并务必调用
track()来告诉 Vue “这里被读取了，记得建立依赖关系”。 - setter 是舞台中心：接收到新值后，第一件事就是
clearTimeout，取消可能存在的旧定时器。然后，设置一个新的定时器，在指定的延迟之后，才执行真正的赋值操作，并调用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)
}
}
})
}
在组件中使用起来，和普通的 ref 几乎一样简单：
import { useDebouncedRef } from './useDebouncedRef'
export default {
setup() {
const searchQuery = useDebouncedRef('', 500) // 设置500毫秒的防抖延迟
return {
searchQuery
}
}
}
模板绑定更是无需任何改动，依然是我们最熟悉的 。瞧，防抖逻辑已经悄然生效，用户体验的提升就藏在这简洁的代码背后。
注意事项和常见坑
思路虽然清晰，但魔鬼藏在细节里。有几个常见的陷阱，一不小心就可能掉进去：
- 切忌在 setter 里过早调用 trigger()：这是最容易犯错的地方。如果你在
set(newValue)里一拿到新值就立刻调用trigger()，那么防抖效果将完全失效，每次输入都会立即触发更新。务必确保trigger()只在定时器的回调函数中被调用。 - 定时器清理是必须的：每次设置新定时器前，一定要用
clearTimeout清理旧的。否则，快速连续输入会导致多个定时器堆积，最终可能引发多次不必要的更新，防抖逻辑也就形同虚设了。 - 别忘了组件卸载时的清理工作：这是一个关乎内存泄漏的好习惯。在 Vue 3 的 Composition API 中，可以在
onBeforeUnmount生命周期钩子里，加入clearTimeout(timeout)的调用，确保组件销毁时，残留的定时任务也被一并清除。 - 考虑功能的扩展性：基础的防抖已经实现，但实际需求可能更复杂。比如，是否需要支持“首次输入立即执行”（leading edge）？或者提供一个手动取消防抖的方法？这些都可以通过为工具函数增加额外的参数（例如
immediate、maxWait）和逻辑来实现，让这个自定义 ref 更加健壮和灵活。
