Vue父组件修改了通过 props传递给子组件的数据,子组件没有及时更新(打印总是慢一步)

201 阅读2分钟

原因:

起因是我在父组件中把一个id传递给子组件,希望在子组件中调用接口查询数据展示,我只需要在父组件中修改为不同的id即可
希望很美好,可事实却出人意料,每次查询的时候id总是上一个值(一开始id是0),导致结果总不对

大致代码如图所示,父组件按钮触发事件,修改num值,然后调用子组件的方法打印num值 image.png

在网上查询了很久,只有解决方法,没有具体原因说明,这里记录一下原因:
在Vue中,当父组件通过ref调用子组件方法时,这个调用是立即执行的,而打印数据也是同步进行的。但是,Vue的响应式系统会监测到props数据的改变,并在下一个事件循环周期中通知子组件进行更新。因此,当你在父组件中修改了props传递给子组件的数据后,子组件的更新是异步进行的,也就是说,子组件的更新会在下一个事件循环周期中执行。
由于子组件的更新是异步进行的,所以在父组件中立即打印props数据时,打印出来的值会是修改前的旧值,而不是修改后的新值。只有在下一个事件循环周期中,当子组件更新完成后,打印出来的值才会是修改后的新值。

解决办法:

为了避免数据延后一个值的问题,我们可以在修改props数据后,使用nextTick方法或者setTimeout等待下一个事件循环周期,然后再调用子组件方法并打印数据。这样可以确保打印出来的值是更新后的新值,而不是旧值。