Vue 3 组合式函数中如何正确使用防抖节流:从闭包陷阱到自定义指令
在 Vue 3 的组合式 API 里,把防抖或节流函数直接写在 setup 中是一个高频踩坑点。很多人在输入框搜索、窗口 resize 或按钮连点场景下会写 const debouncedFn = debounce(fn, 300),然后在模板里绑定 @input="debouncedFn"。功能看似正常,但组件卸载后定时器仍在跑,或者每次重新渲染都生成新函数导致防抖失效。更隐蔽的问题是,当防抖函数内部依赖响应式变量时,闭包捕获的是旧值,引发数据不一致。另一个常见需求是把防抖逻辑封装成可复用的组合式函数或自定义指令,但指令的 value 更新时机和 unmounted 清理容易被忽略。这篇文章...