Vue.js component lifecycle for children

Question

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>

Answer 1

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() and created() 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() and created() hooks execute respectively.
• these child components mount to DOM elements, which calls their beforeMount() and mounted() 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() and mounted() hooks are called.

Answer 2

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).

Answer 3

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 :

1. app created

// we add the parent

1. parent Created
2. child Created
3. child Mounted
4. parent Mounted

// now we remove the parent :

1. parent ready to unmount
2. child ready to unmount
3. child unMounted
4. parent unMounted

PS : beware that beforeDestroy & destroyed in Vue 2 became beforeUnmounted & unMounted un Vue 3