Vue3 – 生命周期与组合式API

简介

Vue3 中的生命周期函数，与Vue2大致相同，但有部分地方进行了变更。

Vue2 生命周期

Vue3 生命周期

Vue3 支持两种生命周期函数，分别是配置项式生命周期（兼容Vue2生命周期方式），和组合式API生命周期方式。

与Vue2不同的只有销毁阶段,Vue3不再使用 beforeDestroy 和 destroyed 方法。进而改成 beforeUnmount 和 unmounted 方法。

组合式API生命周期

Vue3 除了可以在配置项中配置生命周期，也可以通过组合式API配置生命周期，代码如下：

// 引入组合式生命周期函数
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";

export default {
  name: 'App',

  setup() {

    onBeforeMount(()=>{
      console.log("---onBeforeMount---")
    });
    onMounted(()=>{
      console.log("---onMounted---")
    });
    onBeforeUpdate(()=>{
      console.log("---onBeforeUpdate---")
    });
    onUpdated(()=>{
      console.log("---onUpdated---")
    });
    onBeforeUnmount(()=>{
      console.log("---onBeforeUnmount---")
    })
    onUnmounted(()=>{
      console.log("---onUnmounted---")
    })
    return {
      
    }
  }
}

Vue2和Vue3的组合式API对应如下：

注意：如果在Vue3中同时使用配置项式和组合式api,其执行顺序如下

=> setup
=> beforeCreate
=> created
=> onBeforeMount
=> beforeMount
=> onMounted
=> mounted
=> onBeforeUpdate
=> beforeUpdate
=> onUpdated
=> updated
=> onBeforeUnMount
=> beforeUnMount
=> onUnMounted
=> unmounted