响应式状态高频变更导致卡顿，需对由input、scroll等高频事件触发的非即时操作（如搜索、拖拽、resize）做防抖，即控制更新时机而非阻止状态更新；应确保状态同步更新，副作用解耦防抖执行。
响应式状态频繁变更引发卡顿，本质是响应式系统在短时间内被触发大量依赖更新（如 computed 重算、effect 重新执行、视图 diff 和渲染），尤其在用户连续输入、鼠标移动或滚动等场景下极易发生。对 Actions 做防抖，不是阻止状态更新，而是控制“触发更新的时机”，让状态变更更合理、更可控。
明确哪些 Action 需要防抖
不是所有状态变更都要防抖——只有那些由高频外部事件（如 input、mousemove、scroll、resize）直接驱动、且不立即生效也不影响用户体验的操作才适合。例如：
- 搜索框输入时的模糊查询（无需每敲一个字都发请求 + 更新列表）
- 拖拽过程中实时更新坐标（只需最终位置或间隔采样）
- 窗口 resize 后调整布局（等用户停手再响应，避免反复重排）
而像表单校验反馈、按钮点击提交、开关切换等操作，通常需即时响应，不宜防抖。
在 Composition API 中封装防抖 Action
使用 lodash.debounce 或原生 setTimeout/clearTimeout 封装一个可组合的防抖函数，并确保它能正确绑定响应式上下文（如 ref、reactive 状态）。推荐用自定义 Hook 方式复用：
示例（Vue 3 + TypeScript）：
import { ref, onBeforeUnmount } from 'vue'
export function useDebouncedAction(fn: (...args: any[]) => void, delay: number) {
let timer: ReturnType<typeof setTimeout> | null = null
const debounced = (...args: any[]) => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => fn(...args), delay)
}
// 组件卸载时清理定时器，避免内存泄漏
onBeforeUnmount(() => {
if (timer) clearTimeout(timer)
})
return debounced
}
在 setup 中使用：
const searchQuery = ref('')
const searchResults = ref([])
const debouncedSearch = useDebouncedAction((q: string) => {
if (!q.trim()) return
// 实际搜索逻辑（可含 API 调用）
fetchSearchResults(q).then(res => searchResults.value = res)
}, 300)
// 绑定到 input 事件
const onInput = (e: Event) => {
searchQuery.value = (e.target as HTMLInputElement).value
debouncedSearch(searchQuery.value)
}
注意响应式依赖与防抖的协作关系
防抖本身不改变响应式数据，但容易误以为“防抖了就不用监听 ref 变化”。关键点：
-
state 仍需正常响应式更新：比如
searchQuery.value = ...必须同步执行，否则视图不会及时反映输入内容 - 副作用（如请求、计算、DOM 操作）才被防抖：它们应从响应式变化中解耦，通过防抖函数触发
- 避免在 watch 内直接调用防抖函数却不做清除——watch 回调可能多次触发，导致多个定时器并存
更稳妥的方式是：把防抖逻辑放在事件处理器里，而不是 watch 中；若必须用 watch，记得每次触发前清除上一个定时器（useDebouncedAction 已处理）。
进阶：支持取消、立即执行与配置化
真实项目中，你可能需要：
- 手动取消待执行任务（如切换路由前清空搜索队列）
- 首次触发立即执行，后续节流（即 leading edge）
- 根据参数动态调整延迟（如网络差时延长 debounce 时间）
此时建议引入成熟的工具库（如 lodash.debounce 的完整 API），或扩展 useDebouncedAction 支持 options 参数，包括 leading、maxWait、cancel 方法等，提升灵活性和可维护性。
