在vue2中父子组件生命周期执行顺序
时间: 2024-01-07 18:09:10 浏览: 37
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. 父组件beforeDestroy
14. 子组件beforeDestroy
15. 子组件destroyed
16. 父组件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` 钩子函数。
前端vue2父子组件的生命周期执行顺序
在Vue2中,父子组件的生命周期执行顺序如下:
1. 父组件的生命周期:
- beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
- created:在实例创建完成后被调用,此时可以访问到数据和方法,但是还未挂载到DOM上。
- beforeMount:在挂载开始之前被调用,此时模板编译已完成,但是还未将模板渲染到页面上。
- mounted:在挂载完成后被调用,此时组件已经被渲染到页面上,可以进行DOM操作。
2. 子组件的生命周期:
- beforeCreate:同父组件的beforeCreate。
- created:同父组件的created。
- beforeMount:同父组件的beforeMount。
- mounted:同父组件的mounted。
3. 父组件更新时的生命周期:
- beforeUpdate:在数据更新之前被调用,此时可以对更新前的状态进行操作。
- updated:在数据更新之后被调用,此时DOM已经更新完毕。
4. 子组件更新时的生命周期:
- beforeUpdate:同父组件的beforeUpdate。
- updated:同父组件的updated。
5. 组件销毁时的生命周期:
- beforeDestroy:在实例销毁之前被调用,此时实例仍然完全可用。
- destroyed:在实例销毁之后被调用,此时实例已经被销毁,无法再访问到实例的数据和方法。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)