vue组件通信中竞态问题本质是更新时序不可控，需通过watch监听+v-if控制渲染、标记位禁用watch、暴露isready信号、abortcontroller取消请求等手段解决。
Vue 组件通信中，异步操作一旦没控制好执行顺序，就容易引发竞态问题——后发的请求覆盖先发的结果、watch 覆盖草稿数据、子组件提前使用未就绪的资源等。核心不是“有没有异步”，而是“谁先更新、谁后生效”是否可控。
props 传递异步数据时的竞态
父组件异步获取数据后再传给子组件，子组件在 onMounted 中直接读取 props，往往拿不到值，因为此时父组件的请求可能还没返回。
常见错误写法：
- 在 onMounted 里直接用 props.xxx 发起子组件内部请求
- 没做空值判断，直接调用 props.obj.method() 报错
推荐做法：
- 用 watch 监听关键 props 变化，有值再执行逻辑
- 配合 immediate: true，首次也能触发（但注意：仅当 props 初始有默认值才可靠）
- 更稳妥的是加一层 v-if="props.data" 控制子组件渲染时机
watch 触发与数据赋值的时序冲突
典型场景：表单草稿回填时，先设分类字段，watch 立即重置明细列表；紧接着赋值明细数据，却因 Vue 响应式队列异步执行，被 watch 的重置逻辑覆盖。
本质是“赋值”和“watch 回调”在响应式系统中进入同一异步批次，执行顺序不可控。
解决思路：
- 避免在 watch 内直接修改被监听字段所影响的其他响应式数据（如 category → items）
- 改用 computed 或 函数式模板 动态生成 items 结构，不依赖副作用赋值
- 若必须用 watch，加一个标记位（如 isDraftLoading），在 loadDraftData 过程中临时关闭 watch 逻辑
ref / 实例传递中的“存在 ≠ 就绪”
父组件把组件 ref 传给子组件，子组件 watch 到 ref 存在就立刻调用其方法，结果失败——因为组件挂载了，但内部异步初始化（如 Cesium Viewer、图表库实例）还没完成。
这不是 Vue 的 bug，而是资源加载生命周期和组件生命周期不一致。
可行方案：
- 父组件暴露一个明确的状态信号，比如 isReady，由父组件在资源真正就绪后才设为 true
- 子组件 watch isReady，而非 ref 本身
- 或者让父组件提供一个 promise（如 getReadyPromise()），子组件 await 它再操作
接口请求本身的竞态控制
用户快速输入搜索关键词，多次请求并发，后发请求先返回，导致界面显示旧关键词的结果。
这不是通信问题，但常发生在父子或兄弟组件协作场景中（如搜索框 + 结果列表）。
实用手段：
- 用 AbortController 主动取消上一次请求
- 封装一个防竞态的请求函数，内部维护一个序列号，只接受最新请求的响应
- UI 层加 loading 状态锁，限制单位时间内只能发起一次有效请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
