Vue.js 子组件生命周期

子组件的创建和挂载顺序是什么?我知道单个组件的生命周期记录在

也看看 这篇文章由 LinusBorg 在 vuejs 论坛上发表.

<块引用>

• beforeCreate() 和父级的created() 先运行.
• 然后父模板被渲染，这意味着子组件被创建.
• 所以现在孩子的 beforeCreate() 和 created() 钩子分别执行.
• 这些子组件挂载到 DOM 元素上，调用它们的 beforeMount() 和 mounted() 钩子.
• 只有在父模板完成后，父模板才能挂载到DOM，所以最后父节点的beforeMount()和mounted()钩子是调用.

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