Vue parent component data is sometimes absent
Problems caused by the order of Vue's watch monitoring
Business scenario:
When using Vue's watch to monitor, we encounter such a business scenario, parent component A coordinates an object a, and subcomponents a1, a2, a3 respectively process a property of object a in the parent component.
Code Design
In order to be able to synchronize data in real time, I designed a set of monitoring processes in the parent-child components. The main reason is that the child components update their own data after listening to the data passed by the parent component, and their own data is updated in the component and The data of the parent component is compared, if not the same, the data is passed to the parent component, and the parent component updates the data.
In this way, a real-time communication with a hierarchical structure is realized between a set of parent-child components and child components.
Problem
But during the test, it was found that when the sub-component was listening, it did not listen to the data of the parent component first, but listened to its own internal data, which led to an error in the subsequent judgment, because the data after the initialization of the sub-component The object is empty and inconsistent with the content data passed from the parent component, so the empty object is notified to the parent component, resulting in the occasional occurrence of this attribute of the data in the parent component.
Solution:
This is caused by the watch monitoring order of vue, just put the data monitoring of the parent component before the data monitoring of the child component