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