Vue2生命周期、Vue3生命周期及其对比

本文介绍: Vue2生命周期、Vue3生命周期及其对比，总结： Vue2和Vue3钩子变化不大，beforeCre a t e 、create d 两个钩子被setup()钩子来替代。

一、Vue2中的生命周期

Vue2的生命周期分为8个阶段，它们分别是：

beforeCre a t e（创建前）：在实例初始化之后，数据观测和事件配置之前被调用。此时实例还未完成初始化，无法访问到data、computed、watch、methods等属性和方法。
create d（创建完成）：在实例创建完成后被立即调用。此时，实例已完成了数据观测和属性计算，同时也完成了methods和watch/event 事件的配置。
beforeMount（挂载前）：在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染成 html。
m ount e d（挂载完成）：在实例挂载到页面之后调用。此时真实DOM已经渲染完成，可以进行DOM操作。
beforeUp date（更新前）：在数据更新之前被调用，该方法可用于在更新之前访问现有的DOM，例如手动保存滚动位置。
update d（更新完成）：在数据更新之后被调用，该方法还会在组件的子组件更新之后被调用。
b efo reDe stroy（销毁前）：在实例销毁之前调用。此时实例仍然完全可用。
dest ro y e d（销毁完成）：在实例销毁之后调用。此时实例所有的指令和事件都已经卸除，所有的子实例都已经被销毁。

在使用时，可以在Vue 组件中直接定义这些生命周期方法，它们自动被调用。需要注意的是，生命周期钩子函数的t hi s 指向Vue实例。在某些情况下，我们可以利用生命周期函数来实现特定的功能，例如：

在created生命周期中，可以进行一个异步请求数据的操作。
在mounted生命周期中，可以进行DOM的操作。
在beforeDestroy生命周期中，可以清除定时器，解绑事件等操作。

总之，生命周期函数为我们提供了丰富的钩子来定制Vue组件的行为，更好地理解和掌握它们的使用方法是开发高质量Vue应用的关键。

二、Vue3中的生命周期

1、setup() : 开始创建组件，在 beforeCre a te 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂在到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUp date(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onAc tivated(): 被包含在 <keep–a live> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onEr ro rCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

三、Vue2.X和Vue3.X对比

    vue2           -------&gt;          vue3
 
beforeCreate(){}   --------&gt;      setup(()=&gt;{})
created(){}        --------&gt;      setup(()=&gt;{})
beforeMount(){}    -------->      onBeforeMount(()=>{})
mounted(){}        -------->      onMounted(()=>{})
beforeUpdate(){}   -------->      onBeforeUpdate(()=>{})
updated(){}        -------->      onUpdated(()=>{})
beforeDestroy(){}  -------->      onBeforeUnmount(()=>{})
destroyed(){}      -------->      onUnmounted(()=>{})
activated(){}      -------->      onActivated(()=>{})
deactivated(){}    -------->      onDeactivated(()=>{})
errorCaptured(){}  -------->      onErrorCaptured(()=>{})