Vue.js 子组件生命周期-前端问题

Vue.js component lifecycle for children(Vue.js 子组件生命周期)

本文介绍了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.

这篇关于Vue.js 子组件生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！