vue父组件数据时有时无---关于Vue的watch监听的顺序问题

vue父组件数据时有时无

Vue的watch监听的顺序导致的问题

业务场景:
在使用vue的watch监听的时候,遇到这样一个业务场景,父组件A中统筹一个对象a,子组件a1,a2,a3分别处理父组件中对象a的一个属性。
代码设计
为了能够实时的进行数据同步,我在父子组件中设计了一套监听流程,主要是子组件在监听到父组件传递过来的数据后更新自己的数据,自己的数据在组件中更新后和父组件的数据进行比对,如果不一样,就将数据传递给父组件,父组件更新数据。
这样就实现了一套父子组件和子组件之间的一种带有层级结构的实时通信。
问题
但是在测试的时候发现,子组件在监听的时候,并没有先监听到父组件的数据,而是监听到了自己内部的数据,这就导致了后面的判断出错,因为子组件初始化之后的数据对象是空的,和父组件的传递过来有内容的数据不一致,就将空对象通知给了父组件,导致父组件中数据的该属性出现时有时无的情况。
解决方案:
这是由于vue的watch监听顺序导致的,将父组件的数据监听放在子组件的数据监听之前即可

猜你喜欢

转载自blog.csdn.net/geshi201028/article/details/111630552