vue2生命周期与vue3的生命周期

vue2生命周期

vue实例从创建到销毁的过程就是生命周期;

也就是从开始创建，初始化数据，编译模板，挂载dom->渲染，更新->渲染，准备销毁，销毁的过程;

vue的生命周期常见的主要分为4大阶段8大钩子函数;

第一阶段创建前/后

在beforeCreate执行的时候，data和method 还没有初始化,只有一些vue默认的方法;

在created 执行的时候，data和method已经初始化完成可以操作了;

第二阶段: 渲染前/后

在beforeMount 执行的时候，模板已经在内存中渲染好了、但还没有真正渲染到页面中去;

在mounted 执行的时候，将内存中渲染好的模板, 真实的替换到浏览器中;

执行完mounted，vue实例的初始化阶段就已经结束，此时已经脱离创建阶段，进入运行阶段 ;
运行阶段只有两个周期函数，会根据data数据的改变执行0或者多次;
created和mounted的区别,在created时html元素还没有渲染出来,不能操作dom节点,而到mounted时html元素已经渲染出来,可以直接操作dom节点;

第三阶段:挂载前/后

在beforeUpdate执行的时候，页面显示的数据还是旧的, 但是data数据已经是最新的, 页面还没有和data保持同步;

在updated执行的时候，已经把更新后的数据渲染到视图中去了, 页面的数据已经是最新的, 和data保持同步了;
从运行阶段到销毁阶段;

第四阶段:销毁前/后

在beforeDestroy 执行的时候，实例进入准备销毁的阶段、此时data 、methods 、指令等还是可用状态;

在destroyed执行的时候，实例已经完成销毁、此时data 、methods 、指令等都不可用;

另外三个不常用生命周期函数

keep-alive 主要用于保留组件状态或避免重新渲染。

activated只有在keep-alive 组件激活时调用。

deactivated只有在keep-alive 组件停用时调用。

errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

父子组件的生命周期钩子

1.加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2.子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

3.父组件更新过程

父beforeUpdate->父updated

4.销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

vue3生命周期

1. setup 创建实例前
2. onBeforeMount 挂载DOM前
3. onMounted 挂载DOM后
4. onBeforeUpdate 更新组件前
5. onUpdated 更新组件后
6. onBeforeUnmount 卸载销毁前
7. onUnmounted 卸载销毁后