在 watcheffect 中实现防抖或节流需将逻辑封装为独立函数，防抖用 ref 存储并清除旧定时器，节流用时间戳判断间隔，二者均应解耦于 watcheffect 的响应式追踪，避免误用 oninvalidate 清理定时器。
在 watchEffect 中实现防抖或节流的网络请求，关键不是直接在 watchEffect 内部写定时器，而是把防抖/节流逻辑封装成可复用的函数，并在副作用中调用它 —— 因为 watchEffect 本身会自动追踪响应式依赖并重新执行，而防抖/节流需要控制“执行时机”，二者需解耦。
防抖：等输入稳定后再发请求
防抖适合搜索框、筛选条件变更等场景，目标是“最后一次变更后等待一段时间再执行”。不能在 watchEffect 每次触发时都新建定时器（否则旧定时器无法清除），必须维护一个外部引用（如 ref）来保存上一次的定时器 ID。
示例做法：
- 用
ref(null)存储当前 pending 的定时器 ID - 每次
watchEffect触发时，先清除旧定时器，再设置新定时器 - 定时器回调里调用实际的请求函数（如
fetchData()）
代码示意：
const searchQuery = ref('')
const debounceTimer = ref(null)
<p>watchEffect(() => {
// 清除上一次定时器
if (debounceTimer.value) clearTimeout(debounceTimer.value)</p><p>// 设置新定时器（比如 300ms 后执行）
debounceTimer.value = setTimeout(() => {
fetchData(searchQuery.value)
}, 300)
})</p><p>function fetchData(query) {
if (!query.trim()) return
// 发起 API 请求...
}</p>节流：固定频率最多执行一次
节流适用于滚动监听、频繁开关切换等场景，目标是“单位时间内只执行一次”。和防抖不同，节流更关注执行频率上限，常见实现是记录上一次执行时间戳，判断是否达到间隔阈值。
注意：watchEffect 本身不控制执行频率，所以节流逻辑必须包裹在请求调用前：
- 用
ref(Date.now())记录上次执行时间 - 每次副作用触发时，检查当前时间与上次执行时间差是否大于阈值
- 满足条件才执行请求，并更新时间戳
代码示意：
const switchStatus = ref(false)
const lastCall = ref(0)
<p>watchEffect(() => {
const now = Date.now()
const THROTTLE_MS = 1000</p><p>if (now - lastCall.value > THROTTLE_MS) {
fetchSwitchState(switchStatus.value)
lastCall.value = now
}
})</p><p>function fetchSwitchState(status) {
// 发送状态变更请求...
}</p>封装成组合式函数更清晰
把防抖/节流逻辑抽离为可复用的 hook，能避免重复代码、提升可读性。例如 useDebounceFn 接收函数和延迟时间，返回一个包装后的函数；在 watchEffect 中调用它即可。
- 返回的函数内部管理定时器，自动清理，支持立即执行选项
-
watchEffect只负责响应式追踪，不掺杂定时逻辑 - 多个地方用同一防抖函数时，彼此定时器互不影响
简单封装示意：
function useDebounceFn(fn, delay) {
let timer = null
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => fn(...args), delay)
}
}
<p>// 使用
const debouncedFetch = useDebounceFn(fetchData, 300)</p><p>watchEffect(() => {
debouncedFetch(searchQuery.value)
})</p>注意 watchEffect 的清理时机
watchEffect 支持传入清理函数（通过 onInvalidate），但防抖/节流的定时器不属于“副作用清理”的典型场景 —— 它们是为延迟执行服务的，应由自身逻辑控制清除，而不是依赖 Vue 的清理钩子。错误做法是把 clearTimeout 放在 onInvalidate 里，这会导致：如果用户快速连续输入，前几次触发的定时器可能被误清，但最后一次还没到时间就被清掉，最终请求不发出。
- 防抖必须在每次新触发时主动清除旧定时器
- 节流靠时间戳判断，无需清理定时器
- 只有真正需要“取消未完成异步操作”（如 abort fetch）时，才用
onInvalidate
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
