vue3生命周期

vue3导入生命周期钩子的方式

import { onMounted, onUpdated, onUnmounted } from 'vue'

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

Vue2与Vue3生命周期对比对比

:beforeCreate -> use setup()
:created -> use setup()
:beforeMount -> onBeforeMount
:mounted -> onMounted
:beforeUpdate -> onBeforeUpdate
:updated -> onUpdated
:beforeDestroy -> onBeforeUnmount
:destroyed -> onUnmounted
:errorCaptured -> onErrorCaptured