首页>>前端>>Vue->父子组件的生命周期顺序原因?

父子组件的生命周期顺序原因?

时间:2023-12-07 本站 点击: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

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

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

React的生命周期从广义上分为三个阶段:挂载、渲染、卸载,因此可以把React的生命周期分为两类:挂载卸载过程和更新过程。

一、挂载卸载过程

1.constructor,完成了React数据的初始化;

2.componentWillMount,组件初始化数据后,但是还未渲染DOM前;

3.componentDidMount,组件第一次渲染完成,此时dom节点已经生成;

4.componentWillUnmount,组件的卸载和数据的销毁。

二、更新过程

1.componentWillReceiveProps (nextProps),父组件改变后的props需要重新渲染组件时;

2.shouldComponentUpdate(nextProps,nextState),主要用于性能优化(部分更新),因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,在这里return false可以阻止组件的更新穗弯余;

3.componentWillUpdate (nextProps,nextState),shouldComponentUpdate返回true后,组件进入重新渲染的流程;

4.componentDidUpdate(prevProps,prevState),组件更新完毕后触发;

5.render(),渲染时触发。

三、父子组件加载顺序

观察父子组件的挂载生命周期函数,可以发现挂载时,子组件的挂载钩子先被触发猜滚;卸载时,子组件的卸载钩子后被触发。

我们经常在挂载函数上注册监听器,说明此时是可以与页面交互的,也就是说其实所有挂载钩子都是在父组件实际挂载到dom树上才触发的,不过是在父组件挂载后依次触发子组件的 componentDidmount ,最后再触发自身的挂载钩子,说白了,componentDidMount 其实是异步钩子。

相反,卸载的时候父节点先被移除,再从上至下依次触发子组闹镇件的卸载钩子;

但是我们也经常在卸载钩子上卸载监听器,这说明 componentWillUnmount 其实在父组件从dom树上卸载前触发的,先触发自身的卸载钩子,但此时并未从dom树上剥离,然后依次尝试触发所有子组件的卸载钩子,最后,父组件从dom树上完成实际卸载。

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/17620.html