Vue.js 的 watch 默认浅监听且不处理异步副作用；需设 deep: true 实现深度监听，结合防抖、AbortController 和清理函数避免竞态与内存泄漏，并用 flush 控制触发时机。
Vue.js 中的 watch 监听对象变化时，默认是浅监听，无法自动捕获对象内部属性的修改；而涉及异步操作（如 API 请求、定时器）时，若不加控制，容易出现响应滞后、重复触发、竞态问题或内存泄漏。解决的关键在于：开启深度监听 + 合理使用 immediate 和 flush 选项 + 手动清理异步任务。
深度监听对象内部变化
默认情况下，watch 对响应式对象只监听其引用是否改变，不关心内部属性变化。要监听嵌套属性变动，需设置 deep: true：
- 适用于监听复杂对象（如表单数据、配置项、API 返回的嵌套结构）
- 注意性能开销：深度监听会递归遍历所有嵌套属性，对象过大时可能卡顿
- 不支持监听 undefined 或 null 值的属性，建议初始化时确保结构完整
避免异步操作重复执行与竞态问题
当用户快速输入或频繁切换状态时，watch 可能连续触发多次异步请求，导致旧请求结果覆盖新请求结果（例如搜索框输入）。推荐做法：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 使用防抖（debounce）：延迟执行，仅保留最后一次操作
- 用
AbortController主动中止上一个未完成的 fetch 请求 - 在 watch 回调中保存当前请求的标识（如时间戳或随机 id），比对再更新视图
正确处理 watch 中的副作用与清理逻辑
watch 回调中启动的异步任务（如 setTimeout、setInterval、addEventListener）必须手动清理，否则组件卸载后仍运行，造成内存泄漏或报错：
立即学习“前端免费学习笔记（深入）”；
- 在 watch 回调返回一个清理函数（类似
onUnmounted的机制），Vue 会在下一次监听触发或组件销毁前自动调用它 - 示例：启动定时器后，返回
() => clearInterval(timer) - 对于 Promise 链，无法直接取消，应结合标志位（如
isAlive）判断是否继续执行后续逻辑
利用 flush 控制 watch 触发时机
watch 默认在组件更新前（pre）执行，有时需要确保 DOM 已更新后再操作（比如聚焦输入框、滚动定位）：
-
flush: 'post'：在组件更新后、DOM 渲染完成后执行回调 -
flush: 'sync'：同步执行（慎用，可能影响响应式系统性能） - 配合
nextTick()可进一步确保 DOM 就绪，尤其在post模式下仍需精确控制时
