Vue2和Vue3生命周期的对比

一、Vue生命周期

vue实例从创建到销毁的过程，具体来说就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染数据、更新数据、最后销毁这样的一个过程。

二、生命周期对比

Vue2生命周期	Vue3生命周期
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

以及特殊钩子

Vue2	Vue 3
activated	deactivated
onActivated	onDeactivated
errorCaptured	onErrorCaptured

三、生命周期钩子函数详解

1.beforeCreate

创建vue实例之前，此时vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

2.created

创建实例成功，vue实例的数据对象data有了，挂载元素$el还没有。

3.beforeMount

渲染DOM之前，vue实例的挂载元素$el和data都初始化了，但还是虚拟的dom节点。

4.mounted

渲染DOM完成，vue实例挂载完成。

5.beforeUpdate

data更新时触发，重新渲染之前。

6.Update

data更新时触发，重新渲染完成。

7.beforeDestroy

组件销毁之前，在这一步，vue实例仍然完全可用。

8.destroyed

组件销毁完成，vue实例解除了事件监听以及和dom的绑定。

四、setup函数

setup 函数是在beforeCreate生命周期函数之前运行的

setup函数接收两个参数，props和context

注意：

• 因为setup()是在beforeCreated之前，data、methods还未初始化，所以在setup中无法使用
• setup函数只能是同步的

五、生命周期调用

1.Vue2

2.Vue3