组合式函数封装防抖与节流是 Vue 3 最清晰可复用的方式：useDebounce 返回延迟执行函数，重复调用重置计时器；useThrottle 返回间隔内最多执行一次的函数，均自动处理定时器清理、this 绑定和响应式兼容。
用 组合式函数（Composable） 封装防抖与节流，是 Vue 3 中最清晰、可复用性最强的方式。它把行为逻辑从组件中抽离，让调用方自由决定何时启用、用哪种策略、传什么参数，同时天然支持响应式、类型推导和生命周期管理。
封装核心：useDebounce 和 useThrottle
两个函数都返回一个“包装后的新函数”，接收原始函数和延迟时间作为参数，内部自动处理定时器清理、this 绑定和响应式兼容问题。
- useDebounce：返回的函数在最后一次调用后延迟执行，中间重复调用会重置计时器
- useThrottle：返回的函数在指定间隔内最多执行一次，适合高频连续触发场景
示例实现（推荐放在 src/composables/useDebounce.ts 和 src/composables/useThrottle.ts）：
立即学习“前端免费学习笔记（深入）”；
import { ref, onUnmounted } from 'vue'export function useDebounce<f extends any> any>(fn: F, delay: number) {</f> const timer = ref<nodejs.timeout null>(null)</nodejs.timeout> const debouncedFn = (...args: Parameters<f>) => {</f> if (timer.value) clearTimeout(timer.value) timer.value = setTimeout(() => fn(...args), delay) } // 组件卸载时自动清除定时器，防内存泄漏 onUnmounted(() => { if (timer.value) clearTimeout(timer.value) }) return debouncedFn as (...args: Parameters<f>) => void</f>}
在组件中使用：简洁且语义明确
不需要写定时器逻辑，也不用手动清理 —— 所有副作用由组合式函数接管。
将静态 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)<button>提交</button>
进阶：统一策略接口 + 可切换模式
若项目中需动态切换防抖/节流（比如配置中心控制），可封装一个通用策略钩子：
type Strategy = 'debounce' | 'throttle'export function useEventStrategy<f extends any> any>(</f> fn: F, delay: number, strategy: Strategy = 'debounce') { if (strategy === 'debounce') return useDebounce(fn, delay) return useThrottle(fn, delay)}
这样业务组件只需传入策略名，无需关心底层实现差异，便于灰度或 A/B 测试。
注意事项与最佳实践
- 避免在
setup外部直接调用防抖/节流函数（如mounted中），应确保其生命周期与组件绑定 - 若被包装函数依赖
this或闭包变量，请确保调用时上下文正确（组合式函数中默认保留） - 对异步操作（如 API 请求），建议配合
abortController实现请求取消，防抖仅解决触发频率，不解决并发请求 - TypeScript 用户可利用泛型约束参数类型，编辑器能自动推导
debouncedFn的入参结构
