重学vue3(二):vue3生命周期(包含父与子)
在 Vue3 中,父子组件的生命周期执行顺序遵循从外到内、从父到子的初始化流程,但子组件的挂载完成先于父组件。以下是结合 <script setup>
语法糖的详细生命周期流程、执行顺序及代码示例:
一、父子组件生命周期执行顺序
1. 挂载阶段(Mounting)
执行顺序:
父 setup
→ 父 onBeforeMount
→ 子 setup
→ 子 onBeforeMount
→ 子 onMounted
→ 父 onMounted
2. 更新阶段(Updating)
执行顺序:
父 onBeforeUpdate
→ 子 onBeforeUpdate
→ 子 onUpdated
→ 父 onUpdated
3. 卸载阶段(Unmounting)
执行顺序:
父 onBeforeUnmount
→ 子 onBeforeUnmount
→ 子 onUnmounted
→ 父 onUnmounted