子组件 mounted 里打印 props.list 是空数组,接口回来后页面有数据,但子组件那段初始化逻辑再也没执行,控制台只留了一条空数组日志。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

watch(() => props.list, init, { immediate: true });
<Child v-if='list.length' :list='list' />

父级在异步回调里才给数据赋值,子组件早已挂载完成,mounted 只跑一次,props 后续再怎么变也不会让它重新执行,这是顺序问题不是数据问题。这一点先确认清楚,后面就不用反复试。

「生命周期顺序」这类改动最怕改一半,回滚脚本先准备好,再动生产。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

具体做法是,用 watch 监听 props 变化再执行初始化,别只靠 mounted;父级等接口数据全部就绪之后,再渲染子组件;watch 加上 immediate 把首次场景也覆盖到,省掉额外判断。

改完照着核一遍,接口返回后初始化逻辑执行一次,拿到的数据完整,不再出现空数组。

作者 9823189