Vue.js 子组件生命周期

Posted 2023-02-23

【中文标题】Vue.js 子组件生命周期

【英文标题】：Vue.js component lifecycle for children

【发布时间】：2019-02-25 06:32:19

【问题描述】：

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

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

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

【参考方案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