Vue父子组件生命周期执行顺序
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
原文: