【VUE】父子组件生命周期的调用顺序

144 阅读1分钟

首先来回顾vue组件的生命周期

(官网截图)

image.png

**

其中vue3对比vue2有以下几点改变:

1、去掉了beforeCreatecreated,直接使用setup

2、beforeDestroydestroyed 被替换为了onBeforeUnmountonUnmounted

另:新增了开发模式下: onRenderTracked(组件渲染过程中追踪到响应式依赖时调用)、 onRenderTriggered(响应式依赖的变更触发了组件渲染时调用)

父子组件生命周期调用顺序

我们来通过在父子组件各个生命周期钩子中console.log来查看他们执行的顺序 (大家可自行试验)结论如下:

08cedfbc4789480f14b42d61ae92682.jpg

(以上为纯手写笔记,字略丑,见谅)

总结

先触发父组件,然后触发子组件,然后子组件先完成,最后父组件收尾

依据以上三对,可总结如下:

3336238e5e9b196359e6b49b3878ba5.jpg

以上为父子组件生命周期调用顺序所总结的相关笔记,感谢双越老师!

感谢各位大佬的阅读!笔芯~