Vue父子组件生命周期执行顺序
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue父子组件生命周期执行顺序相关的知识，希望对你有一定的参考价值。
参考技术A vue2 中 执行顺序 ：beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed
vue3 中 执行顺序 setup => onBeforeMount => onMounted => onBeforeUpdate => onUpdated => onBeforeUnmount => onUnmounted
对应关系
vue2 -> vue3
执行顺序为：
父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted
执行顺序为：
父beforeUpdate => 子beforeUpdate => 子updated => 父updated
执行顺序为：
父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed
规律就是：父组件先开始执行，然后等到子组件执行完，父组件收尾。
VUE生命周期中父子组件的执行顺序
1.加载渲染过程
父beforeCreate=》父created=》父beforemount=》子beforeCreate=》子created=》子beforemount=》子mounted=》父mounted
2.子组件更新过程
父beforeUpdate=》子beforeUpdate=》子updated=》父updated
3.父组件更新
父beforeUpdate=》父uodated
4.销毁过程
父beforeDestory=>子beforeDestory=>子destory=》父destoryed
Vue钩子函数
1.在使用<keep-alive></keep-alive>来缓存组件状态时，这个时候created钩子函数就不会再被重复调用了，这时需要将数据写到activted中才可以保证每次进入页面后都会显示正常
以上是关于Vue父子组件生命周期执行顺序的主要内容，如果未能解决你的问题，请参考以下文章