在 watchEffect 中不能直接套用 lodash.debounce，而应将业务逻辑用 debounce 包裹后在 watchEffect 回调中调用；watchEffect 负责依赖追踪与调度，debounce 控制执行节奏，二者分工协作实现响应式防抖。
在 watchEffect 中直接套用 lodash.debounce 是行不通的——因为 watchEffect 本身不是事件回调，而是一个响应式副作用收集器，它的执行由依赖变化驱动，不能像 watch 那样把防抖函数当回调传进去。正确做法是：把**需要防抖的业务逻辑（比如发请求、测高、更新状态）用 debounce 包裹，再在 watchEffect 内部调用它**。
核心思路：在 watchEffect 回调里触发防抖函数
watchEffect 负责“感知变化并调度”，debounce 函数负责“控制执行节奏”。两者分工明确：
-
watchEffect 读取响应式数据（如
searchKey.value、textContentRef.value），自动建立依赖追踪 - 一旦这些数据变化，watchEffect 立即重新运行回调
- 回调中不直接执行耗时操作，而是调用一个已用
debounce包装好的函数 - debounce 函数会取消前序未执行任务，只保留最后一次变化后的延迟执行
具体写法（Vue 3 Composition API）
以搜索场景为例：
import { ref, watchEffect } from 'vue'
import { debounce } from 'lodash'
const searchKey = ref('')
// 防抖后的请求函数（注意：必须在 setup 顶层定义，避免重复创建）
const debouncedFetch = debounce((key) => {
if (key.trim()) {
fetch(`/api/search?q=${encodeURIComponent(key)}`)
.then(res => res.json())
.then(data => console.log(data))
}
}, 300)
watchEffect(() => {
// watchEffect 自动追踪 searchKey.value
debouncedFetch(searchKey.value) // 每次变化都调用，但 debounce 控制实际执行
})
关键细节与避坑点
几个容易出错但影响效果的地方：
- debounce 函数必须复用：不能在 watchEffect 回调里每次新建，否则每次都会生成独立定时器，失去防抖意义
- watchEffect 不要配合 nextTick 做防抖：nextTick 解决的是 DOM 渲染时机问题，和防抖无关；混用反而导致逻辑混乱
-
避免在 debounce 内部读取响应式数据：比如
debounce(() => console.log(searchKey.value))—— 这会让依赖脱离 watchEffect 追踪，变化时不触发 -
清理定时器（可选但推荐）：组件卸载前手动调用
debouncedFetch.cancel()，防止内存泄漏或异步回调污染
进阶：封装成可复用的组合式函数
把上述模式抽成 useDebouncedEffect，便于多处使用：
import { watchEffect, onBeforeUnmount } from 'vue'
import { debounce } from 'lodash'
export function useDebouncedEffect(
effect: () => void,
delay: number = 300,
options?: Parameters<typeof debounce>[2]
) {
const debounced = debounce(effect, delay, options)
watchEffect(() => {
debounced()
})
onBeforeUnmount(() => {
debounced.cancel()
})
}
// 使用
useDebouncedEffect(() => {
console.log('搜索关键词已稳定', searchKey.value)
}, 400)
这种结构让防抖逻辑与响应式追踪解耦，既保持 watchEffect 的自动依赖能力，又获得 debounce 的节流控制，适合搜索、折叠判断、尺寸重算等高频响应场景。
