What order are child components created and mounted in? I know that the lifecycle for a single component is documented here, but I couldn't find anything that described when children were created and mounted.
For example, what is the creation and mounting order for the following component?
<template>
<div class='parent'>
<child-1/>
<child-2/>
<child-3/>
</div>
</template>
I found this article to be especially helpful in explaining the order of parent/child lifecycle hooks execution. This diagram in particular offers a nice summary of the process.
Also have a look at this post by LinusBorg on the vuejs forum.
beforeCreate()andcreated()of the parent run first.- Then the parent’s template is being rendered, which means the child components get created.
- so now the children’s
beforeCreate()andcreated()hooks execute respectively.- these child components mount to DOM elements, which calls their
beforeMount()andmounted()hooks.- and only then, after the parent’s template has finished, can the parent be mounted to the DOM, so finally the parent’s
beforeMount()andmounted()hooks are called.
In Vue 3, the lifecycle hook execution order can be found in a part of its tests.
The rule of thumb is: with the exception of created hooks (which are now replaced by setup()), all hooks prefixed with before executes top-down (parent run first) while the "after" hooks execute bottom-up (children run first).
Both beforeCreated and created hooks execute top-down, however (as a child can only be created after the parent renders).
As the first response give a good view of the creation/mounting process it fails to respond for the destruction process.
here is what happen :
// we add the parent
// now we remove the parent :
PS : beware that beforeDestroy & destroyed in Vue 2 became beforeUnmounted & unMounted un Vue 3
