Vue2和Vue3的生命周期的区别和使用方法

1、Vue2和Vue3生命周期对比

	Vue2		Vue3
创建	beforeCreate	created	setup()	setup()	创建
挂载	beforeMount	mounted	onBeforeMount	onMounted	挂载
更新	beforeUpdate	updated	onBeforeUpdate	onUpdated	更新
销毁	beforeDestory	destroyed	onBeforeUnmount	onUnmounted	卸载
激活	activated	deactivated	onActivated	onDeactivated	激活
捕获错误	errorCaptured		onErrorCaptured		捕获错误

 

 

 

 

 

 

 

 

 

 

 

 

2、Vue2生命周期的使用

（1）、beforeCreate：执行该函数时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作，Vue实例中还没有Data，el，methods相关属性。

（2）、created：Vue实例已经初始化data属性和methods中相关方法，可在此阶段调取后端数据，相比于beforeMount（）和mounted（），created（）能更快获取到后端数据，减少页面loading时间。

（3）、beforeMount：进行模板编译，生成虚拟DOM

（4）、mounted：将数据渲染到页面上，生成真实DOM，可以启动定时器、绑定自定义事件、订阅消息等初始化操作。

（5）、beforeUpdate：数据更新时触发该函数，该函数执行时Vue实例中data数据变化，但页面数据仍为旧数据，即data数据与页面数据不同步

（6）、updated：数据更新触发，但时机点位于beforeUpdated后，此时页面数据与Vue实例中data数据能够保持一致。

（7）、beforeDestroy：Vue实例中所有数据、methods、component还未销毁，可进行清楚定时器、解绑自定义事件、取消消息订阅等

（8）、destroyed：Vue实例彻底销毁

（9）、activated：组件缓存被激活，被 keep-alive 缓存的组件激活时调用 使用组件缓存并激活时使用

（10）、deactivated：组件缓存被停用，被 keep-alive 缓存的组件停用时调用

（11）、errorCaptured：子组件发生错误时，当捕获一个来自子孙组件的错误时被调 用。此钩子会收到三个参数：错误对象、 发生错误的组件实例以及一个包含错误 来源信息的字符串。

3、Vue3生命周期的使用

（1）、setup：在组件实例初始化之前调用。在 setup 中可以进行响应式变量的声明和初始化工作。

（2）、onBeforeMount：在挂载之前调用。

（3）、onMounted：在挂载之后调用。可以进行一些需要使用 DOM 的操作，比如初始化某些插件、发送网络请求等。

（4）、onBeforeUpdate：在更新之前调用。在这里可以进行一些在数据变化之前需要执行的逻辑。

（5）、onUpdated：在更新之后调用。通常用于执行一些需要在更新之后立即执行的操作。

（6）、onBeforeUnmount：在卸载之前调用。通常用于清理一些定时器、取消订阅等操作。

（7）、onUnmounted：在卸载之后调用。可以执行一些清理工作，比如释放资源等。

（8）、onActivated:  被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
（9）、onDeactivated:  比如从 A 组件，切换到 B 组件，A 组件消失时执行；
（10）、onErrorCaptured:  当捕获一个来自子孙组件的异常时激活钩子函数。

PS：使用<keep-alive> 组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用<keep-alive> 组件解决。

如果本文对你有帮助，不妨帮帮楼主点个赞吧~