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

vue2 中 执行顺序 :
beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed
vue3 中 执行顺序 setup => onBeforeMount => onMounted => onBeforeUpdate => onUpdated => onBeforeUnmount => onUnmounted
对应关系
vue2 -> vue3

beforeCreate -> setup
created -> setup
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

父子组件执行顺序

挂载阶段

执行顺序为:
父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

更新阶段

执行顺序为:
父beforeUpdate => 子beforeUpdate => 子updated => 父updated

销毁阶段

执行顺序为:
父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed

规律就是:父组件先开始执行,然后等到子组件执行完,父组件收尾。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容