Vue 3 的 watch 适合监听响应式数据变化并发起请求，需用 getter 函数包裹目标、加 immediate: true 初始化加载，配合 AbortController 防竞态，统一管理 loading/error/data 三态，并可依场景选用 watchEffect 简化逻辑。
Vue 3 的 watch 非常适合处理“数据一变，就发请求、更新状态”的场景，但直接在回调里发请求容易出竞态、重复触发或状态不同步。关键不是“能不能发”，而是“怎么发得稳、可控、可取消”。
监听变化并发起请求
当路由参数、搜索关键词、筛选条件等响应式数据变化时，用 watch 触发请求是最自然的方式。
- 必须用 getter 函数包裹监听目标，比如
() => props.searchKey或() => route.query.category，否则无法响应后续变化 - 建议加
immediate: true，让组件初始化时也拉一次数据，避免首屏空白 - 不要在 watch 回调里直接修改 props，而是更新组件内部的
ref或reactive状态（如loading.value = true、list.value = []）
防竞态：用 AbortController 中断旧请求
用户快速输入或频繁切换筛选项时，前一个请求还没返回，后一个已发出——旧响应可能覆盖新结果。用 AbortController 主动中止是标准解法。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 每次 watch 触发时新建一个
controller = new AbortController() - fetch 或 axios 请求中传入
{ signal: controller.signal } - 在下一次 watch 触发前调用
controller.abort()（可用onCleanup自动管理） - 注意捕获
AbortError，避免未处理的 rejected promise 报错
控制加载与错误状态
异步请求必然涉及 loading、error、data 三态，watch 本身不管理状态，但它是驱动状态更新的入口。
立即学习“前端免费学习笔记（深入）”；
- 请求开始前设
loading.value = true、error.value = null - 成功后赋值
data.value = res.data，再设loading.value = false - 失败时设
error.value = err.message，同样要置loading.value = false - 如果需要“空状态提示”，可在模板中结合
v-if="!loading && !data.length"判断
进阶：配合 computed 和 watchEffect 简化逻辑
不是所有场景都非用 watch 不可。若只是“依赖几个 ref，自动发请求”，watchEffect 更简洁；若需旧值对比或精细控制时机，才选 watch。
-
watchEffect会自动追踪内部用到的所有响应式变量，无需手动写 getter，且默认立即执行一次 - 若请求依赖多个来源（如
searchKey和page），watch支持数组形式：watch([() => searchKey, () => page], ...) - 深层嵌套对象变化需加
deep: true；仅需监听对象引用变化则保持默认deep: false
