Vue Composition API 怎么实现防抖与节流逻辑的组合式封装-Vue.js-PHP中文网

组合式函数封装防抖与节流是 Vue 3 最清晰可复用的方式：useDebounce 返回延迟执行函数，重复调用重置计时器；useThrottle 返回间隔内最多执行一次的函数，均自动处理定时器清理、this 绑定和响应式兼容。

vue composition api 怎么实现防抖与节流逻辑的组合式封装

用 组合式函数（Composable） 封装防抖与节流，是 Vue 3 中最清晰、可复用性最强的方式。它把行为逻辑从组件中抽离，让调用方自由决定何时启用、用哪种策略、传什么参数，同时天然支持响应式、类型推导和生命周期管理。

封装核心：useDebounce 和 useThrottle

两个函数都返回一个“包装后的新函数”，接收原始函数和延迟时间作为参数，内部自动处理定时器清理、this 绑定和响应式兼容问题。

useDebounce：返回的函数在最后一次调用后延迟执行，中间重复调用会重置计时器
useThrottle：返回的函数在指定间隔内最多执行一次，适合高频连续触发场景

示例实现（推荐放在 src/composables/useDebounce.ts 和 src/composables/useThrottle.ts）：

import { ref, onUnmounted } from 'vue'
export function useDebounce any>(fn: F, delay: number) {
  const timer = ref(null)
  const debouncedFn = (...args: Parameters) => {
    if (timer.value) clearTimeout(timer.value)
    timer.value = setTimeout(() => fn(...args), delay)
  }
  // 组件卸载时自动清除定时器，防内存泄漏
  onUnmounted(() => {
    if (timer.value) clearTimeout(timer.value)
  })
  return debouncedFn as (...args: Parameters) => void
}

在组件中使用：简洁且语义明确

不需要写定时器逻辑，也不用手动清理 —— 所有副作用由组合式函数接管。

例如搜索输入框场景：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

<script setup lang="ts"></script>
import { ref, watch } from 'vue'
import { useDebounce } from '@/composables/useDebounce'
const keyword = ref('')
const search = () => console.log('发起搜索:', keyword.value)
// 包装后，输入变化 500ms 内只触发最后一次
const debouncedSearch = useDebounce(search, 500)
// 监听关键词变化，触发防抖函数
watch(keyword, debouncedSearch)

按钮点击防重复提交也可同样处理：

const handleSubmit = () => { /* 提交逻辑 */ }
const debouncedSubmit = useDebounce(handleSubmit, 800)

进阶：统一策略接口 + 可切换模式

若项目中需动态切换防抖/节流（比如配置中心控制），可封装一个通用策略钩子：

type Strategy = 'debounce' | 'throttle'
export function useEventStrategy any>(
  fn: F,
  delay: number,
  strategy: Strategy = 'debounce'
) {
  if (strategy === 'debounce') return useDebounce(fn, delay)
  return useThrottle(fn, delay)
}

这样业务组件只需传入策略名，无需关心底层实现差异，便于灰度或 A/B 测试。