VUE3的生命周期【真·VUE3】

1、

Vue2中的beforeDestroy 在Vue3中被 beforeUnmount取代
Vue2中的destroyed在Vue3中被 unmounted取代

2、

Vue2                ->      Vue3
------------------------------------------
beforeCreate        ->      setup
created             ->      setup
beforeMount         ->      onBeforeMount 
mounted             ->      onMounted
beforeUpdate        ->      onBeforeUpdate
updated             ->      onUpdated
beforeDestroy       ->      onBeforeUnmount
destroyed           ->      onUnmounted
activated           ->      onActivated
deactivated         ->      onDeactivated
errorCaptured       ->      onErrorCaptured



//- onBeforeMount：DOM即将挂载
//- onMounted：DOM挂载完毕
//- onBeforeUpdate：DOM即将更新
//- onUpdated：DOM更新完毕
//- onBeforeUnmount：即将销毁
//- onUnmounted：销毁完毕

举例：

import { defineComponent, onBeforeMount,onMounted } from 'vue'
export default defineComponent({
  setup () {
    onBeforeMount(() => {
      console.log("DOM即将挂载");
    })
    onMounted(() => {
      console.log("DOM挂载完毕");
    })
    //- onBeforeUpdate(() => {})    //- DOM即将更新
    //- onUpdated(() => {})   //- DOM更新完毕
    //- onBeforeUnmount(() => {})   //- 即将销毁
    //- onUnmounted(() => {})   //- 销毁完毕
    return {}
  }
})