Vue中父子组件生命周期执行顺序

字数：522 阅读时长：1分钟阅读：85

在使用以Vue为架构的项目中，当业务逻辑越来越复杂，页面的组件层级结构也会随之增加。所以要想有清晰的逻辑思路，就肯定需要对各种父子组件钩子函数加载时机和执行顺序了如指掌。
Vue

Vue生命周期的官网定义：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue生命周期总共分为：初始化 前后，创建 前后，更新 前后，销毁 前后。

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

parent  beforeCreate
parent  created
parent  beforeMount
child   beforeCreate
child   created
child   beforeMount
child   mounted
parent  mounted

parent  beforeDestroy
child   beforeDestroy
child   destroyed
parent  destroyed

Vue官网生命周期图示：
Vue

本文作者： Tiven
发布时间： 2021-07-24
最后更新： 2023-07-17
本文标题： Vue中父子组件生命周期执行顺序
本文链接： https://www.tiven.cn/p/367439f7/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！

天問