Vue2 VS Vue3 生命周期

一、生命周期的概念

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子（也会叫生命周期函数）

二、生命周期的规律

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

三、Vue2 VS Vue3生命周期

生命周期	Vue 2	Vue 3	备注
创建阶段	beforeCreate、created	setup	vue3创建阶段只有setup
挂载阶段	beforeMount、mounted	onBeforeMount、onMounted
更新阶段	beforeMount、mounted	onBeforeUpdate、onUpdated
销毁/卸载阶段	beforeDestroy、destroyed	onBeforeUnMount、onUnMounted	vue3叫卸载阶段更合适，对应挂载阶段

四、Vue3生命周期使用 

五、Vue2生命周期使用 

六、生命周期注意点 

1. 如果存在父子组件，子组件的mounted生命周期比父组件的mounted生命周期先执行
2. debugger可以使生命周日停止执行，比如在beforeMount生命周期写一个debugger，后续的生命周期将不会执行
3. 生命周期钩子的书写顺序不影响钩子的执行顺序
4. 需要避免在更新阶段的两个钩子中进行状态更改，因为这可能会导致无限循环的渲染过程。这是因为状态的更改会再次触发组件的更新过程。
5. 如果组件中使用了定时器、事件监听或其他订阅，为了避免内存泄漏等问题，记得在beforeDestory钩子里清除掉相关监听、订阅

ps：文中只列举对比了常用的4个阶段，vue 2 的8个，vue3的7个生命周期钩子，vue的全部生命周期不止这几个，例如vue3官方文档的生命周期钩子列举了12个，vue3生命周期钩子

 

有需要进一步学习的可以看官方文档，本文暂不列举对比