一、生命周期的概念

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生命周期使用 

<template><div class="Vue3-demo"><h2>当前求和为：{{ sum }}</h2><button @click="changeSum">sum+1</button></div>
</template><!-- vue3写法 -->
<script lang="ts" setup name="Person">import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'// 数据let sum = ref(0)// 方法function changeSum() {sum.value += 1}console.log('setup')// 生命周期钩子onBeforeMount(() => {console.log('挂载之前')})onMounted(() => {console.log('挂载完毕')})onBeforeUpdate(() => {console.log('更新之前')})onUpdated(() => {console.log('更新完毕')})onBeforeUnmount(() => {console.log('卸载之前')})onUnmounted(() => {console.log('卸载完毕')})
</script>

五、Vue2生命周期使用 

<template><div>{{name}}</div>
</template>
<script>
<!-- vue2写法 -->
export default {data(){return {name:'Vue 2 生命周期'}},methods:{onChangeName(){this.name = "测试生命周期更新"}},beforeCreate(){console.log('创建前');},created(){console.log('创建完毕');},beforeMount(){console.log('挂载前');},mounted(){console.log('挂载完毕');},beforeUpdate(){console.log('更新前');},updated(){console.log('更新完毕');},beforeDestroy(){console.log('销毁前');},destoryed(){console.log('销毁完毕');}
}
</script>

六、生命周期注意点 

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

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

 

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