Vue父组件数据更新后子组件对应prop未更新问题求助

排查步骤 #

1. 优先处理你认为无关的无限更新警告 #

这个警告是导致prop不更新的核心原因：Vue的响应式更新是批量入队执行的，如果某组件触发了无限渲染循环，更新队列会被持续占用，父组件count更新触发的重渲染逻辑始终无法执行完成，自然不会同步到子组件的prop。
排查触发警告的组件：

• 检查该组件的模板是否存在渲染时直接修改响应式变量的写法，比如{{ count++ }}这类会在每轮渲染时修改变量的逻辑
• 检查该组件的computed、watch配置，是否存在计算/监听过程中直接修改其他响应式变量，导致每轮更新触发新一轮更新的逻辑
• 检查该组件的render函数是否存在每次调用都修改响应式变量的逻辑

修复无限更新问题后，prop更新问题大概率会同步解决。

2. 若修复后问题仍存在，按以下顺序排查 #

• 确认父组件count的修改是响应式修改：基础类型的数值直接通过this.count += 1这类写法修改即可，不要将count赋值给非响应式的普通变量后再修改
• 检查子组件是否存在同名本地变量覆盖prop：如果子组件的data选项中声明了同名的counter变量，Vue会优先使用本地data的变量，prop的更新不会触发本地变量变化，删除子组件中同名的counter本地声明即可
• 检查父组件调用子组件时是否绑定了固定的key：如果子组件绑定了固定不变的key，极端情况下会导致Vue复用组件实例不触发更新，可以尝试将key绑定到count值：<child :counter="count" :key="count" />

内容的提问来源于stack exchange，提问作者MIGUEL ORTIZ ARELLANO