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

vue父组件数据时有时无

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值