vue父页面与子组件之间的生命周期_触发子组件为什么会触发父组件created-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43582366/article/details/127690263

本文详细解析了Vue中组件的生命周期，包括初始化、挂载、更新和销毁四个阶段，并阐述了各阶段钩子函数的执行顺序及异步请求的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，一个组件的声明周期包括以下几个部分：
在这里插入图片描述

结合父子组件之后一个完整的父子组件生命周期：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

生命周期钩子函数执行顺序？

1. 首先是数据加载渲染到页面，包括初始化阶段和挂载阶段
Vue实例化（new Vue()）-> 父组件beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 真实DOM挂载完毕 -> 子组件 mounted -> 父组件 mounted
2. 其次当data里的数据发生了变化，进入更新阶段
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated -> 获取更新后的真实DOM
3. 最后当$destroy()被调用进入销毁阶段
父组件 beforeDestroy -> 子组件 beforeDestroy -> 实例销毁后 -> 子组件 destroyed -> 父组件 destroyed