customRef 是 Vue 3 提供的高级响应式 API，用于自定义 ref 的 getter 和 setter 行为；它通过手动调用 track() 和 trigger() 控制依赖追踪与更新触发，从而实现输入防抖——每次输入清除旧定时器、延迟后才赋值并触发响应式更新。
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 工具函数：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
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逻辑
