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

javascript 复制代码

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

javascript 复制代码

<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>

六、生命周期注意点

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

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

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