watcheffect 可自动响应多个响应式源变化并聚合多接口请求结果，需配合 oninvalidate 防竞态、统一 loading 状态、错误捕获与空值校验，组件卸载时自动清理。
用 watchEffect 实现多接口并行请求后的数据聚合，关键不是“同时发多个请求”本身，而是让这些请求的触发逻辑自动响应多个状态变化，并在全部完成后再统一处理结果——它天然适合这种“依赖多个响应式源 → 触发副作用 → 聚合结果”的场景。
核心思路：把聚合逻辑写进 watchEffect 回调里
watchEffect 会自动追踪回调中读取的所有响应式变量。只要你在回调里读取了多个 ref（比如 userId.value、tab.value、filter.value），任一变化都会重新执行整个回调，包括发起新请求和处理聚合结果。
- 定义多个响应式源，例如：
const userId = ref(1)、const tab = ref('profile')、const filter = ref('active') - 在
watchEffect(() => { ... })中同步读取它们的值（如userId.value、tab.value） - 利用
Promise.all并行发起多个请求，每个请求都基于当前最新值构造 URL 或参数 - 所有请求 resolve 后，把结果合并、计算或映射成统一结构，赋给一个聚合响应式变量（如
combinedData.value）
必须配合 onInvalidate 防竞态
当用户快速切换 tab 或输入搜索词时，前一次请求可能还没返回，新请求已发出。若不清理，旧响应可能覆盖新结果（即“响应错乱”）。watchEffect 提供 onInvalidate 来注册清理函数：
- 每次新回调执行前，自动调用上一轮注册的
onInvalidate函数 - 在函数内创建
AbortController，把signal传给每个fetch - 在
onInvalidate里调用controller.abort()，中止挂起的请求 - 这样能确保只有最后一次触发的请求结果会被处理
注意响应式更新时机与错误处理
聚合结果要真正可响应，需用 ref 或 reactive 包裹；同时不能忽略失败情况，否则界面可能卡在 loading 状态：
- 用
loading.value = true开始前置标记，请求结束后统一设为false - 每个
fetch后加.catch(() => null)，避免单个失败导致Promise.all拒绝，从而中断整个聚合流程 - 对返回结果做空值/结构校验，再赋值，防止
undefined写入响应式对象引发渲染异常 - 如果某接口长期无响应，可加
timeout封装（如用Promise.race([fetch(), new Promise(...)])）
不需要手动 stop，但组件卸载时要确保 cleanup 完成
watchEffect 默认会在组件卸载时自动停止监听，且已注册的 onInvalidate 也会被调用。不过要注意：
- 若请求中用了
setTimeout、setInterval或第三方库的订阅，必须在onInvalidate里显式清除 - 不要在回调外层用
if (!someCondition) return过早退出，否则依赖收集不全，watchEffect 就无法感知后续变化 - 若需在特定条件下暂停聚合（如表单未提交），建议用
v-if控制整个组件，而非在 watchEffect 内部加条件判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
