Vue 3 中防抖节流应封装为可复用 composable，useDebounce 每次触发清除前定时器并自动 onUnmounted 清理；useThrottle 通过时间戳控制固定间隔执行且首次立即触发，事件监听需确保 add/remove 引用一致。
在 Vue 3 组合式 API 中使用防抖（debounce）和节流（throttle）函数，核心是把它们封装成可复用的 composable，避免在每次事件回调中重复写逻辑，同时确保能正确清理定时器、绑定到组件生命周期（如 onUnmounted）防止内存泄漏。
✅ 防抖函数封装（debounce）
防抖适用于搜索框输入、窗口 resize 等“等用户停下来再执行”的场景。关键点：每次触发都清除前一个定时器，只保留最后一次。
推荐写法（纯函数 + 可取消）：
import { ref, onUnmounted } from 'vue'
<p>export function useDebounce(fn, delay = 300) {
let timer = null</p><p>const debounced = (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
fn(...args)
}, delay)
}</p><p>// 提供手动清除能力（用于组件卸载时清理）
const cancel = () => {
clearTimeout(timer)
timer = null
}</p><p>// 自动清理（可选，按需启用）
onUnmounted(cancel)</p><p>return { debounced, cancel }
}</p>在组件中使用：
import { useDebounce } from '@/composables/useDebounce'
<p>export default {
setup() {
const search = (query) => {
console.log('发起搜索:', query)
// 调用 API...
}</p><pre class="brush:php;toolbar:false;">const { debounced: debouncedSearch } = useDebounce(search, 500)
return () => (
<input oninput="{(e)"> debouncedSearch(e.target.value)}
placeholder="输入搜索关键词..."
/>
)} }
✅ 节流函数封装（throttle）
节流适用于鼠标拖拽、滚动监听等“固定频率执行”的场景。关键点：保证函数至少间隔 delay 时间才执行一次，且首次触发立即执行。
推荐写法（带时间戳控制 + 可取消）：
import { ref, onUnmounted } from 'vue'
<p>export function useThrottle(fn, delay = 300) {
let lastTime = 0
let timer = null</p><p>const throttled = (...args) => {
const now = Date.now()
if (now - lastTime {
fn(...args)
lastTime = Date.now()
}, delay - (now - lastTime))
} else {
fn(...args)
lastTime = now
}
}</p><p>const cancel = () => {
clearTimeout(timer)
timer = null
}</p><p>onUnmounted(cancel)</p><p>return { throttled, cancel }
}</p>在组件中监听滚动（示例）：
import { useThrottle } from '@/composables/useThrottle'
<p>export default {
setup() {
const handleScroll = () => {
console.log('滚动中...', window.scrollY)
// 更新吸顶状态、懒加载等
}</p><pre class="brush:php;toolbar:false;">const { throttled } = useThrottle(handleScroll, 100)
onMounted(() => {
window.addEventListener('scroll', throttled)
})
onUnmounted(() => {
window.removeEventListener('scroll', throttled)
// 注意：这里传的是 throttled 包装后的函数，所以移除要一致
// 或更稳妥：保存原始 listener 引用（见下方优化建议）
})
return () => <div>...</div>} }
⚠️ 实用建议 & 常见陷阱
-
不要直接在模板中内联调用防抖/节流函数：比如
@input="debounce(fn, 300)"每次渲染都会新建函数，失去防抖意义；必须提前定义好绑定的函数。 -
事件监听器移除要匹配同一函数引用：如果用了
useThrottle返回的throttled，那么addEventListener和removeEventListener必须传同一个引用；否则移除失败，造成内存泄漏。 -
组合式 API 中优先用
ref或computed依赖响应式数据：若防抖函数内部需读取props或ref，注意闭包捕获的是初始值 —— 应改用watch或在调用时传入最新值。 - 可选增强：支持 Promise 防抖（如防抖请求并返回最后结果），但普通场景不必要，增加复杂度。
? 补充：推荐用现成库（Lodash / underscore）
生产环境建议直接用 lodash-es 的树摇版本，更健壮：
import { debounce, throttle } from 'lodash-es'
<p>// 在 setup 中
const debouncedFn = debounce((val) => api.search(val), 300)
// 不用手动清理 —— 但你仍需在 onUnmounted 中调用 debouncedFn.cancel()</p>Lodash 版本自带 .cancel() 和 .flush() 方法，且处理了 this 绑定、maxWait 等边界情况，比手写更可靠。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
