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是先子后父。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容