watch 失效主因是父组件异步数据晚于子组件挂载，导致首次 prop 赋值不被视为“变化”；推荐用 v-if 延迟子组件挂载或 watchEffect + 条件判断来规避。
因为子组件渲染时，父组件的异步数据还没返回，props 还是初始值（比如 undefined、[] 或 {}），watch 拿不到变化——它只响应“从一个值变到另一个值”，不响应“从无到有”的等待过程。
父组件异步传值，子组件 watch 失效
这是最常见的场景：父组件用 fetch、axios 或 setTimeout 获取数据后才赋给 prop；子组件已挂载，但此时 prop 仍是空或默认值，后续数据到达时，watch 却没触发或只触发一次就停了。
- 根本原因不是 watch 写错了，而是监听时机错配：组件初始化早于数据就绪
- Vue 不会为“尚未存在的值”建立依赖，所以首次赋值不被视为“变化”
- 尤其在 Vue 3 的 Composition API 中，若用
watch(() => props.xxx)，而props.xxx初始为 undefined，watch 可能直接跳过追踪
加 immediate: true 并不够
immediate: true 确实能让 watch 在绑定时立即执行一次，但它只解决“第一次拿不到值”的表象，无法应对异步数据晚到、多次更新、或值为 null/undefined 时的空依赖问题。
- 如果
props.data初始是undefined，immediate执行时拿到的newVal就是undefined，逻辑可能报错或跳过 - 后续真实数据到来时，watch 能捕获，但若中间有重置、清空等操作，容易漏掉关键状态
- 更稳妥的做法是：只在值真正有效时才启动业务逻辑，比如判断
Array.isArray(newVal) && newVal.length或newVal && typeof newVal === 'object'
推荐解法：v-if 控制子组件挂载时机
让子组件“等数据来了再出生”，从源头避开监听失灵。
- 父组件中定义一个标志，如
dataLoaded = ref(false) - 请求成功后设为
true，并在模板中：<ChildComponent v-if="dataLoaded" :data="fetchedData" /> - 子组件内部可放心用普通 watch，无需
immediate或防御性判空——它第一次收到的props.data就是完整、可用的数据 - 额外好处：避免图表渲染空白、列表闪动、接口重复调用等问题
进阶：用 watchEffect + 条件执行更简洁
Vue 3 中，watchEffect 自动收集依赖，适合处理“有值才干活”的逻辑：
- 写法更短：
watchEffect(() => { if (props.list?.length) doSomething(props.list); }); - 它会在
props.list变化时自动重跑，且天然支持响应式依赖（包括深层属性） - 不需要手动写
deep: true或immediate，语义更清晰 - 注意：它不提供
oldVal，也不适用于需要精确对比新旧值的场景
