响应式状态变更太频繁导致卡顿？教你如何对 Actions 进行防抖处理-Vue.js-PHP中文网

响应式状态高频变更导致卡顿，需对由input、scroll等高频事件触发的非即时操作（如搜索、拖拽、resize）做防抖，即控制更新时机而非阻止状态更新；应确保状态同步更新，副作用解耦防抖执行。

响应式状态变更太频繁导致卡顿？教你如何对 actions 进行防抖处理

响应式状态频繁变更引发卡顿，本质是响应式系统在短时间内被触发大量依赖更新（如 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
}</typeof>

在 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)
}