Before we talk about the VUE lifecycle, how does vUE perform
These processes are repeated when rendering the child components
BeforCreate and created
These two life cycles are the process of vue init
So these two life cycles execute in order, father before child
BeforeMounted and mounted
BeforeMounted is called at the start of mount and before rendering child components, so it is executed in the order of parent before child
Mounted is executed after patch is complete. Vue components are mounted first and then their parent. Mounted components are mounted first and then their parent. / / Mounted component is not mounted on the page. / / Mounted component is not mounted on the page. / / Mounted component is not mounted on the page.
When will it be implemented? There is a judgment when the child component executes the invokeInersetHook
When the initial component is initialized to true and not the root vue instance, the VNode queue is assigned to a property of the parent component, and then the insertedVnodeQueue of the child component is pushed into the parent component. InsertedVnodeQueue is not collected until invokeCreateHooks are used. So this ensures that the vNode queue is in order, with the child component vNodes coming before the parent component vNodes
Finally, when the root vue instance patch finishes the DOM element rendering, the insertedVnodeQueue queue is iterated, and the root vue instance executes its own mounted hook.
Therefore, mounted indicates that the child is first and the parent is later
BeforeUpdate and updated
When a component is updated, the parent component is updated first, and then the updates of the child components are affected by the changes in the props passed to the child components. Therefore, beforeUpdate execution order, parent before child
Updated: Every component init generates a Watcher to notify the component of changes, and the data on the component is accessed during render to complete the watcher collection process. When data changes, the data-dependent Watcher is notified to push to a watcherQueue, which is then updated at an asynchronous time. When all components are updated, the watcherQueue calls updated from the end of the queue.
Therefore, the updated execution order is child first and parent later
BeforeDestory and destoryed
BeforeDestory: Before the child, the beforeDestory hook starts at the parent and then calls the beforeDestory of the child
Destoryed:
The deStoryed hook is executed after the child component is destroyed.
So the deStoryed execution order is child before parent
Activated and deactivated
Activated is the same as Mounted. When invokeInsertHook is executed in the root vue instance, the Mounted hook is executed first and the activatedChildComponent is executed
This function recursively calls the Activated hook of the child component
Why not mount hooks when traversing each component of a VNode? Because the keepAlive property of a keepAlive component is false, the Activated hook is not executed and is called recursively on the keepAlive component
So activated comes before the parent
Deactivated: Calls the deactivated hook by recursively accessing the child component. After the child component deactivated, the deactivated hook of the parent component is called
So activated comes before the parent
