Vue.js中用watch监听搜索框输入并配合防抖函数可减少无效请求、提升体验；推荐setup中用watch API监听ref变量，封装useDebounce或手写闭包防抖，延迟300ms且组件卸载前清除定时器，同时控制loading状态和空值校验。
Vue.js 中用 watch 监听搜索框输入，再配合防抖函数，能有效减少无效请求、提升响应体验，避免用户每敲一个字就发一次请求。
监听输入值变化并触发防抖逻辑
使用 watch 监听搜索关键词（如 searchQuery），但不直接发起请求，而是调用防抖后的函数。注意开启 immediate: false（默认）和 deep: false，因为字符串不需要深度监听。
- 推荐在
setup()中用watch()API，响应式变量用ref或computed - 防抖函数建议封装为可复用的
useDebounce()组合式函数，或直接用 Lodash 的debounce - 示例中延迟 300ms，用户连续输入时只执行最后一次变更后的搜索
手写简易防抖函数（无外部依赖）
若不想引入 Lodash，可用闭包实现轻量防抖：每次触发时清除上一次定时器，仅保留最后一次的执行计划。
- 函数接收目标函数和延迟时间，返回防抖后的新函数
- 需确保在组件卸载前清除定时器（如
onBeforeUnmount中调用clearTimeout），避免内存泄漏 - 注意 this 指向问题 —— 在 setup 中使用箭头函数或显式绑定，通常无需处理
结合请求与 loading 状态控制
防抖只是优化触发时机，实际请求还需配合加载态和错误处理，防止重复提交或界面失真。
立即学习“前端免费学习笔记（深入）”；
- 在防抖函数内部设置
isLoading = true，请求结束（无论成功失败）再置为false - 可加空值校验：当
searchQuery.trim() === ''时跳过请求，清空结果列表 - 若需取消未完成的请求（如 Axios），可用
AbortController配合防抖逻辑，在新请求发起前 abort 上一个
Vue 3 + TypeScript 完整片段示意
以下为精简可用的核心逻辑（省略模板部分）：
import { ref, watch, onBeforeUnmount } from 'vue'
const searchQuery = ref('')
const isLoading = ref(false)
let debounceTimer: NodeJS.Timeout | null = null
const performSearch = async () => {
if (!searchQuery.value.trim()) return
isLoading.value = true
try {
// 调用 API，例如 await api.search(searchQuery.value)
} finally {
isLoading.value = false
}
}
const debouncedSearch = () => {
if (debounceTimer) clearTimeout(debounceTimer)
debounceTimer = setTimeout(performSearch, 300)
}
watch(searchQuery, debouncedSearch)
onBeforeUnmount(() => {
if (debounceTimer) clearTimeout(debounceTimer)
})
