vue声明周期的执行顺序

头发被吹的凌乱了

已于 2024-03-22 16:56:47 修改

阅读量160

点赞数 3

文章标签： vue.js javascript 前端

于 2024-03-22 16:54:11 首次发布

本文链接：https://blog.csdn.net/www12312312/article/details/136946165

版权

本文详细解释了Vue组件的生命周期过程，从父组件到子组件，包括beforeCreate、created、beforeMount、mounted、updated、beforeDestroy和destroyed等各个阶段的执行顺序。

摘要由CSDN通过智能技术生成

vue声明周期的执行顺序

完整流程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated -> 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

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