vue3父子组件生命周期顺序
时间: 2023-11-02 07:00:39 浏览: 42
在 Vue 3 中,父子组件的生命周期顺序与 Vue 2 有所不同。以下是 Vue 3 中父子组件生命周期的顺序:
1. 父组件实例化(beforeCreate 和 created 钩子函数被调用)。
2. 子组件实例化(beforeCreate 和 created 钩子函数被调用)。
3. 父组件的模板编译和渲染。
4. 子组件的模板编译和渲染。
5. 父组件的 beforeMount 和 mounted 钩子函数被调用。
6. 子组件的 beforeMount 和 mounted 钩子函数被调用。
7. 父组件的 updated 钩子函数被调用(如果数据发生了变化)。
8. 子组件的 updated 钩子函数被调用(如果数据发生了变化)。
9. 父组件的 beforeUnmount 钩子函数被调用(在组件卸载之前调用)。
10. 子组件的 beforeUnmount 钩子函数被调用(在组件卸载之前调用)。
11. 父组件的 unmounted 钩子函数被调用(在组件卸载之后调用)。
12. 子组件的 unmounted 钩子函数被调用(在组件卸载之后调用)。
需要注意的是,Vue 3 中去除了一些生命周期钩子函数,如 beforeUpdate 和 activated。同时,Vue 3 还引入了新的功能 API,如 setup 函数和 onMounted 钩子函数,用于替代一部分生命周期的功能。
相关问题
vue3父子组件生命周期执行顺序
在Vue3中,父子组件生命周期的执行顺序与Vue2有些不同。下面是Vue3中父子组件生命周期的执行顺序:
1. 父组件beforeCreate
2. 父组件setup
3. 父组件created
4. 子组件beforeCreate
5. 子组件setup
6. 子组件created
7. 子组件beforeMount
8. 子组件onBeforeMount
9. 父组件beforeMount
10. 父组件onBeforeMount
11. 子组件mounted
12. 子组件onMounted
13. 父组件mounted
14. 父组件onMounted
15. 子组件beforeUpdate
16. 子组件onBeforeUpdate
17. 父组件beforeUpdate
18. 父组件onBeforeUpdate
19. 子组件updated
20. 子组件onUpdated
21. 父组件updated
22. 父组件onUpdated
23. 子组件beforeUnmount
24. 子组件onBeforeUnmount
25. 父组件beforeUnmount
26. 父组件onBeforeUnmount
27. 子组件unmounted
28. 子组件unmounted
需要注意的是,在Vue3中,父组件的 `beforeMount` 和 `onBeforeMount` 钩子函数会在子组件的对应钩子函数之前执行,而在Vue2中,是先执行子组件的 `beforeMount` 钩子函数,再执行父组件的 `beforeMount` 钩子函数。
vue3父子组件生命周期
在Vue3中,父子组件的生命周期钩子的调用顺序如下:
1. 父组件beforeCreate
2. 父组件created
3. 父组件beforeMount
4. 子组件beforeCreate
5. 子组件created
6. 子组件beforeMount
7. 子组件mounted
8. 父组件mounted
9. 子组件beforeUpdate
10. 父组件beforeUpdate
11. 子组件updated
12. 父组件updated
13. 子组件beforeUnmount
14. 父组件beforeUnmount
15. 子组件unmounted
16. 父组件unmounted
在这个过程中,父组件的生命周期钩子会在子组件的钩子之前执行。父组件的生命周期钩子在父组件的模板渲染之前执行,而子组件的生命周期钩子在子组件的模板渲染之前执行。
需要注意的是,Vue3中的组件生命周期钩子名称发生了一些改变,例如beforeMount改为了beforeInit,mounted改为了onMounted,beforeDestroy改为了beforeUnmount。同时,Vue3还引入了一些新的生命周期钩子,onUpdated、onRenderTriggered、onRenderTracked等。
以上是父子组件生命周期钩子的基本执行顺序,具体的调用顺序可能会因为组件的嵌套关系和实际业务逻辑而有所不同。