发布网友
发布时间：2024-09-25 21:28
共1个回答
热心网友
时间：2024-10-12 23:47
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父子组件生命周期函数执行顺序父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
父beforeUpdate-子beforeUpdate-子updated-父updated
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
case1:当子组件渲染的数据是从父组件中调用接口获得数据,然后通过父子组件传值的方式传递到子组件渲染页面页面渲染可能会出现问题;
Vue父子组件生命周期调用顺序
一、顺序
1.加载渲染过程
父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
2.子组件更新过程
父beforeUpdate-子beforeUpdate-子updated-父updated
3.父组件更新过程
父beforeUpdate-父updated
4.销毁过程
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
二、理解
组件的调用顺序都是先父后子,渲染完成的顺序肯定是先子后父
组件的销毁操作是先父后子，销毁完成的顺序是先子后父
三、原理
当dom渲染时，会createElm创建元素，创建元素后会进行初始化，初始化组件的时候内部还有组件，会不停的去渲染，所以它的渲染顺序是先父后子，完成的顺序是先子后父。
dom渲染描述：先父组件要创建beforeCreate、created，父组件实例化完成后要挂载这个父组件beforeMount，挂载父组件的时候会调用父的render方法，渲染的时候发现里面有子组件，这时就会调用子组件的beforeCreate、created、beforeMount，当子组件都完成之后，会把子组件先存起来，这儿有队列，不是子完成就会调用子的mounted，因为子组件中可能还有子组件，这时会暂存一下，到最后子全完成了会按照子调父的调，mounted是先子后父。
Vue中父子组件生命周期的执行顺序同步引入时生命周期顺序为：
父组件的beforeCreate、created、beforeMount--所有子组件的beforeCreate、created、beforeMount--所有子组件的mounted--父组件的mounted
总结：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载
若有孙组件呢？
父组件先beforeCreate=created=beforeMount,然后子组件开始beforeCreate=created=beforeMount，然后孙组件beforeCreate=created=beforeMount=mounted，孙组件挂载完成了，子组件mounted，父组件再mounted
异步引入时生命周期顺序为：
父组件的beforeCreate、created、beforeMount、mounted--子组件的beforeCreate、created、beforeMount、mounted
总结：父组件创建，父组件挂载；子组件创建，子组件挂载。
3.父组件更新过程
父beforeUpdate-父updated
4.销毁过程
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
原文：
Copyright © 2019-2022 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
