vue的生命周期

vue的生命周期

1、概念理解

vue实例在被创建之后都会经过一系列初始化步骤，如需要数据观测、模板编译、挂载实例到dom上，以及数据数据变化时更新dom，在这个过程中会运行生命周期钩子函数，以便用户在特定阶段进行响应的操作

2、生命周期各个阶段

生命周期分8个阶段：创建前后（beforecreate created）、载入前后（beforemount mounted）、更新前后（beforeupdate updated）、销毁前后（beforedestory destoryed），以及一些特殊场景的生命周期

3、整体流程

1、最早触发setup，然后beforeCreate -> init Options API -> created
2、接着判断是否有已经预编译的模板，如果有继续往下执行beforeMount，如果没有则在运行时实时编译，得到render函数，再进入beforeMount；
3、初始化render函数，创建并插入DOM节点，再执行mounted
4、监听是否有数据变化，有则re-render并更新
5、再进行卸载beforeUnmounted 和Unmounted

4、父子组件之间的生命周期

1、创建时依次执行
父beforeCreate -> 父created -> 父beforeMounted -> 子beforeCreate -> 子created -> 子beforeMounted -> 子mounted -> 子activated（如有keep-alive）-> 父mounted -> 父activated（如有keep-alive）

2、销毁时
父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed

3、更新时
父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated

4、vue3变化

销毁实例的两个钩子不一样，新增了三个钩子

vue3生命周期图

图来源：vue官网