首页>>前端>>Vue->vue父子组件执行顺序?

vue父子组件执行顺序?

时间:2023-12-02 本站 点击:0

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

原文:


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/7822.html