Vue.js 子组件生命周期答案

【问题标题】：Vue.js component lifecycle for childrenVue.js 子组件生命周期
【发布时间】：2019-02-25 06:32:19
【问题描述】：

子组件的创建和挂载顺序是什么？我知道单个组件的生命周期记录在 here 中，但我找不到任何描述何时创建和安装子组件的内容。

例如，以下组件的创建和挂载顺序是什么？

<template>
    <div class='parent'>
        <child-1/>
        <child-2/>
        <child-3/>
    </div>
</template>

【问题讨论】：

标签： vue.js components lifecycle

【解决方案1】：

我发现this article 在解释父/子生命周期挂钩的执行顺序方面特别有用。这张图尤其提供了一个很好的过程总结。

还可以在 vuejs 论坛上查看 LinusBorg 的 this post。

父级的beforeCreate() 和created() 先运行。

然后渲染父模板，这意味着子组件被创建。

所以现在孩子的beforeCreate() 和created() 钩子分别执行。

这些子组件挂载到 DOM 元素，调用它们的 beforeMount() 和 mounted() 钩子。

只有在父模板完成后，父模板才能挂载到 DOM 中，所以最后会调用父模板的 beforeMount() 和 mounted() 钩子。

【讨论】：

【解决方案2】：

由于第一个响应可以很好地了解创建/安装过程，它无法响应销毁过程。

这就是发生的事情：

应用已创建

// 我们添加父节点

父创建
已创建子项
儿童装
父级挂载

// 现在我们移除父节点：

父准备卸载
准备卸载的孩子
未安装的孩子
父级未挂载

PS : 注意 Vue 2 中的 beforeDestroy & destroy 变成了 Vue 3 中的 beforeUnmounted & unMounted

【讨论】：