Vue.js component lifecycle for children

问题

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>

回答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.

来源：https://stackoverflow.com/questions/52433712/vue-js-component-lifecycle-for-children