Today, the popular front-end component-based frameworks, page elements can be used highly summarized components, then deal with the relationship between the components just as important as processing architecture page. Correct understanding of the relationship between components in order to make the code work as we expected and way. Recently involved in a project Vue.js encountered greater resistance in dealing with the relationship between father and son nested components, although the final solution to the problem, but to spend a lot of time at the expense of record here, I hope next time do not step on the same pit, we can deal with such problems more efficiently.
0 Problem Description
With react, vue components also have a complete life cycle, at different stages of division of labor. Hook in terms of overall life cycle often use are the following:
- created
- mounted
- destroy
Usually deal with asynchronous requests in these hooks, the most common is to initiate network requests call api to get data.
There is a problem: in a single assembly, the order of execution is the hook created -> mounted -> destroyed, but when nested assembly Sons, parent component and subassembly each have separate hook function, how these hooks Sons blend components is performed, and the order of execution how is it?
A recently encountered in the development of "strange," the problem is due to the implementation of the order and his son hook component lifecycle thorough understanding not caused. The problem is this: a component has a series of sub-components, sub-assemblies and are broken down into components, so down constitutes three components. Demand is after the component displayed on the page, then the data initialization echo. After obtaining parent components pass data to the subassembly, the subassembly according to the required value and the internal metadata filtering processing. So in order to get the new value in the transfer from the parent component subassemblies at what time? .
My approach is this: the top parent element mountedin the initiation request to obtain data is transmitted in the form of props in response to the sub-assembly mechanism of vue, in the subassembly mountedget props for corresponding processing. This approach requires the parent component of mountedthe time prior to the sub-components mounted, but the fact is that right? Obviously not.
This leads to the problem is that data can not be correct echo.
1 inquiry
The method of inquiry is: Write a parent-child relationship of nested components, respectively, in their print log hook function observed execution order. The results obtained are as shown in FIG create parent component, and then create a subassembly; to mount the subassembly, and then mount the parent component.
After the completion of the sub-mount component, the parent component has not been mounted. So when the echo component data, the parent component mountedacquisition api data, sub-assembly mountedis out of reach.
A closer look at the execution order of the parent-child component lifecycle hook, you will find createdthis hook is executed in accordance with the order from outside, so echo scene solution is to: initiate a request to obtain data in created, the order will be received in the created sub-assembly to this data.
2 Conclusion
Vue hook execution order life cycle of parent-child components follow: from outside to inside, and then from the inside out, regardless of nesting levels deep, also follow this rule.
The modular design ideas probably the same, React father and son in the component lifecycle hook execution order, did not make specific inquiry, but it is worth mentioning that componentDidMount react parent component is later than the subcomponents componentDidMount execution.
3 Other
Echo on the question is how to know the remote data back in the subassembly, and by the remote data processing and ultimately form the correct echo. The process of acquiring data in the order hooks, in vue There is also a characteristic watch, it can be updated by way of echoing watch attribute it? This approach needs to be explored.