props 本身不支持防抖，因其是被动接收的数据通道；真正需防抖的是子组件中基于 props 变化触发的副作用逻辑，如请求、计算或 dom 更新，应通过 watch + 防抖函数或上移至父组件实现。
Props 本身不支持“防抖”，因为它是被动接收的数据通道，不是事件或函数调用。所谓“对 Props 实现防抖”，实质是**在子组件内部，对 props 值的变化做节流或防抖处理，避免因父组件高频更新 props 而触发频繁的响应式副作用（如请求、计算、DOM 更新等）**。
为什么不能直接给 props 加防抖？
Props 是 Vue 的响应式输入接口，它的变化由父组件驱动。你无法控制父组件何时更新 prop，也无法拦截或延迟 prop 的赋值过程。Vue 的响应式系统会在 prop 值变更后立即触发依赖收集和更新队列，这是框架底层行为，不可“防抖”。
真正需要防抖的，是 基于 props 变化所执行的副作用逻辑，比如：
- 监听某个 prop（如 searchKeyword）发起搜索请求
- 根据 prop（如 chartData）重绘图表
- 响应 prop（如 filterConfig）触发复杂计算或过滤
在子组件中对 props 变化做防抖的常用方式
核心思路：不直接响应 props 变化，而是用一个防抖后的回调函数来处理它。
-
Vue 3 + setup + watch + 自定义防抖函数：用
watch监听 props，将 handler 包裹进防抖函数中 -
Vue 2 + options API + $watch + lodash.debounce：在
mounted中用this.$watch绑定防抖后的处理函数 - 封装防抖计算属性（仅限简单派生）：适用于只读、轻量、可缓存的场景，但注意 computed 不支持异步或副作用
示例（Vue 3 + TS）：
const props = defineProps();const debouncedSearch = debounce((kw: string) => {
console.log('执行搜索:', kw);
// 这里发请求或更新状态
}, 300);
watch(() => props.keyword, debouncedSearch);
更稳妥的做法：让父组件承担防抖责任
最佳实践往往是把防抖逻辑上移到父组件——因为它控制数据源头。例如：
- 父组件用
ref管理搜索关键词，配合debounce更新该 ref - 再把防抖后的 ref 作为 prop 传给子组件
- 子组件只做纯展示或简单响应，无须再防抖
这样职责清晰，避免子组件重复处理、内存泄漏风险，也更利于复用和测试。
特别注意：避免常见陷阱
-
不要在 setup 中每次渲染都新建防抖函数：会导致 watch 失效（新旧函数引用不同），应定义在顶层或用
ref缓存 -
记得清理定时器：组件卸载时调用防抖函数的
.cancel()（如 lodash 提供的），否则可能引发内存泄漏或错误执行 - props 是只读的，不能在子组件中修改：防抖处理的是“如何响应它”，而非“改变它”
