Vue2 VS Vue3 生命周期

news2025/1/19 8:04:09

一、生命周期的概念

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>