vue中父子组件的生命周期执行顺序
时间: 2023-08-14 16:08:09 浏览: 122
在Vue中,父子组件的生命周期钩子函数执行顺序如下:
1. 父组件的beforeCreate钩子函数先于子组件的beforeCreate钩子函数执行。
2. 父组件的created钩子函数先于子组件的created钩子函数执行。
3. 父组件的beforeMount钩子函数先于子组件的beforeMount钩子函数执行。
4. 子组件的mounted钩子函数先于父组件的mounted钩子函数执行。
5. 父组件的beforeUpdate钩子函数先于子组件的beforeUpdate钩子函数执行。
6. 子组件的updated钩子函数先于父组件的updated钩子函数执行。
7. 父组件的beforeDestroy钩子函数先于子组件的beforeDestroy钩子函数执行。
8. 子组件的destroyed钩子函数先于父组件的destroyed钩子函数执行。
需要注意的是,当父组件销毁时,其所有子组件也会被销毁。因此,在父组件的beforeDestroy和destroyed钩子函数中对于子组件的操作可能会出现一些问题,需要谨慎处理。
相关问题
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` 钩子函数。
vue中父子组件生命周期加载顺序
在Vue中,父子组件的生命周期加载顺序如下:
1. 父组件:创建阶段
- beforeCreate:实例刚被创建,数据观测(data observer)和事件机制(event watcher)都尚未初始化。
- created:实例已经完全创建,数据观测(data observer)和事件机制(event watcher)都已完成。
2. 父组件:挂载阶段
- beforeMount:模板编译/挂载之前被调用。
- mounted:模板编译/挂载完成,组件已经被创建并且在页面中渲染出来。
3. 子组件:创建阶段
- beforeCreate:实例刚被创建,数据观测(data observer)和事件机制(event watcher)都尚未初始化。
- created:实例已经完全创建,数据观测(data observer)和事件机制(event watcher)都已完成。
4. 子组件:挂载阶段
- beforeMount:模板编译/挂载之前被调用。
- mounted:模板编译/挂载完成,组件已经被创建并且在页面中渲染出来。
阅读全文