Vue 的 watch 需配合防抖或节流处理高频变更：防抖适用于搜索等需等待用户停止的操作，节流适用于滚动等需匀速采样的场景，二者不可混用，且须在组件卸载前清理定时器。
Vue 的 watch 本身不处理高频变更的“缓冲”，遇到输入、滚动、筛选等场景，直接在回调里发请求或更新状态，很容易造成重复调用、卡顿甚至状态错乱。真正有效的做法，是把异步操作包进防抖或节流函数里，再由监听器触发——不是改 watch 配置，而是改执行逻辑。
watch + 防抖：适合等用户“停下来”再响应
典型用于搜索框、实时筛选、表单校验等场景。目标是只响应最后一次稳定输入，忽略中间抖动。
- 用
debounce包裹实际异步逻辑（如fetch或 API 调用），设置合理延迟（常用 300–500ms） - 在
watch回调中直接调用该防抖函数，传入新值 - 必须在组件卸载前清理定时器：若使用自定义防抖，手动
clearTimeout；若用 Lodash，调用.cancel()
watch + 节流：适合“匀速采样”，不等停、只控频
适用于监听滚动位置、窗口尺寸、鼠标移动等连续高频变化的响应式数据。重点不是等用户停，而是限制执行密度。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 节流函数确保单位时间（如 100–300ms）内最多执行一次，无需重置计时器
- 监听器触发后，节流函数自动判断是否到达执行窗口，符合条件才运行异步操作
- 一般不用手动清理（无持久定时器），但间隔设太短会失去节流意义，设太长则响应滞后
防抖与节流不能混用，选型看行为意图
防抖强调“最后一次为准”，适合有明确终点的操作；节流强调“固定节奏采样”，适合持续流式输入。比如用户打字搜商品，用防抖；监听页面滚动做吸顶或懒加载，用节流。
立即学习“前端免费学习笔记（深入）”；
- 防抖函数内部依赖
setTimeout+ 清除机制，每次触发都重置倒计时 - 节流函数靠时间戳比对，记录上一次执行时间，只在间隔达标时放行
- 两者都可封装为工具函数复用，避免每个组件重复实现
实战小提醒
别在 watch 里直接写 setTimeout 或手搓逻辑——易漏清理、难复用、不好测。推荐统一引入工具函数（如自定义 debounce 或 lodash.debounce），并在 onUnmounted（Vue 3）或 beforeUnmount 中完成释放。
