Vue 3 中 v-model 不应直接集成防抖，而应通过 watch 监听 ref 状态变化并配合防抖函数延迟执行搜索；推荐使用组合式 useDebounce Hook 封装防抖逻辑，避免重复创建定时器、IME 输入异常及内存泄漏等问题。
Vue 3 中用 v-model 实现搜索输入状态同步时，不能直接把防抖逻辑塞进 v-model 绑定的数据更新里——因为 v-model 本身只负责“数据与视图的双向绑定”，而防抖是“控制副作用触发时机”的行为。关键在于：让输入实时更新本地状态（保证 UI 响应），再用防抖机制延迟触发搜索等耗时操作。
用 watch + 防抖函数监听输入变化
这是最常用、语义清晰且易于调试的方式。输入框仍用 v-model 同步值，但搜索动作由 watch 触发，并包裹防抖逻辑：
- 定义响应式搜索关键词：
const keyword = ref('') - 用
watch监听keyword变化，内部调用防抖后的搜索函数 - 防抖函数需返回一个可复用的回调（不能每次
watch触发都新建一个） - 示例中防抖延时设为 300ms，空值或仅空格时可跳过请求
搭配 .lazy 修饰符减少无效更新
v-model.lazy 把同步时机从 input 事件改为 change（失焦或回车），适合对“最终确认输入”才响应的场景：
- 避免用户连续敲字时频繁触发
watch或计算属性 - 特别适用于搜索框+手动点“搜索”按钮的组合，此时
v-model.lazy+ 按钮点击触发搜索更自然 - 注意：它不替代防抖，而是降低触发频次；若还需防抖（比如支持输入中自动联想），仍要配合
watch或指令
封装成可复用的防抖响应式 Hook
把防抖逻辑抽离为组合式函数，提升复用性与可测试性：
立即学习“前端免费学习笔记（深入）”；
- 编写
useDebounce(value, delay)，返回防抖后的新 ref - 内部用
watch监听原始值，设置定时器更新防抖 ref - 在组件中使用：
const debouncedKeyword = useDebounce(keyword, 500) - 再对
debouncedKeyword做watch，执行 API 请求等副作用
避免常见陷阱
实际开发中容易踩坑的地方：
- 不要在
watch回调里直接写debounce(fn, ms)()—— 这会每次新建防抖函数，失去节流效果 - 清空输入时建议手动清除定时器（尤其用
setTimeout自实现时），防止内存泄漏或误触发 - IME 输入（如中文拼音）下，
input事件可能不及时，可补充监听@compositionstart/@compositionend优化体验 - 防抖期间用户修改了关键词，应确保最终请求的是最新值，而非被覆盖的旧值
