Vue2和Vue3组件生命周期对比

Vue的生命周期其实就是Vue从初始化到最终被销毁期间的一系列重要节点。

可以在生命周期钩子函数中写一写代码执行一些操作。

Vue3的组件生命周期相比于Vue2发生了以下变化。

Vue2组件生命周期

1. beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。
2. create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。
3. beforeMount():已经完成了模板的编译，还没有挂载到页面中。
4. mounted()：将编译好的模板挂载到页面指定的容器中显示。
5. beforeUpdate():状态更新之前执行函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。
6. updated():此时data中的状态值和界面上显示的数据都已经完成了跟新，界面已经被重新渲染好了！
7. beforeDestroy():实例被销毁之前。
8. destroyed():实例销毁后调用，Vue实例指示的所有东西都会解绑，所有的事件监听器都会被移除,所有的子实例也都会被销毁。组件已经被完全销毁，此时组建中所有data、methods、以及过滤器，指令等，都已经不可用了。

Vue3组件生命周期

1. setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
2. onBeforeMount() : 组件挂载到节点上之前执行的函数。
3. onMounted() : 组件挂载完成后执行的函数。
4. onBeforeUpdate(): 组件更新之前执行的函数。
5. onUpdated(): 组件更新完成之后执行的函数。
6. onBeforeUnmount(): 组件卸载之前执行的函数。
7. onUnmounted(): 组件卸载完成后执行的函数
8. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

横向对比

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured