vue3生命周期

对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。
vue3生命周期：

对比vue2生命周期

代码验证生命周期：
vue3生命周期有两种配置方式：
第一种：通过配置使用生命周期钩子函数，在setup()外面配置
第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setup()，执行的时机高于配置项

第一种方式
通过父组件中动态控制子组件显示状态延时卸载钩子函数

//父组件
<script>
import HelloWorld from './components/HelloWorld.vue'
import {
    
     ref } from  'vue'
export default {
    
    
  components:{
    
    
    HelloWorld
  },
  setup() {
    
    
    let isShow = ref(true)
    return {
    
    
      isShow
    }di
  }
}
</script>

<template>
  <button @click="isShow=!isShow">切换</button>
  <HelloWorld v-if="isShow" />
</template>

//子组件
<template>
  <div>
    {
    
    {
    
    num}}
  </div>
  <button @click="num++">+</button>
</template>
<script>
import {
    
     ref } from 'vue'
export  default  {
    
    
  // 1.通过配置使用生命周期钩子函数
  beforeCreate() {
    
    
    console.log('beforeCreate')
  },
  created() {
    
    
    console.log('created')
  },
  beforeMount() {
    
    
    console.log('beforeMount')
  },
  mounted() {
    
    
    console.log('mounted')
  },
  beforeUpdate() {
    
    
    console.log(this.num,'beforeUpdate')
    console.log('beforeUpdate')
  },
  updated() {
    
    
    console.log(this.num,'updated')
    console.log('updated')
  },
  beforeUnmount() {
    
    
    console.log('beforeUnmount')
  },
  unmounted() {
    
    
    console.log('unmounted')
  },
  // 不生效，但也不会报错
  beforeDestroy() {
    
    
    console.log('beforeDestroy')
  },
  // 不生效，但也不会报错
  destroyed() {
    
    
    console.log('destroyed')
  },
  setup() {
    
    
    let num = ref(1)
    return{
    
    
      num
    }
  }
}

</script>

第二种：在组合式api中使用生命周期钩子函数,首先需要引入各个生命周期钩子函数,并且名称不一样,如下

<template>
  <div>
    {
    
    {
    
    num}}
  </div>
  <button @click="num++">+</button>
</template>

<script>
// 2.在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setup()，执行的时机高于配置项
import {
    
     ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export  default  {
    
    
  // 1.通过配置使用生命周期钩子函数
  beforeCreate() {
    
    
    console.log('beforeCreate')
  },
  created() {
    
    
    console.log('created')
  },
  beforeMount() {
    
    
    console.log('beforeMount')
  },
  mounted() {
    
    
    console.log('mounted')
  },
  beforeUpdate() {
    
    
    console.log(this.num,'beforeUpdate')
    console.log('beforeUpdate')
  },
  updated() {
    
    
    console.log(this.num,'updated')
    console.log('updated')
  },
  beforeUnmount() {
    
    
    console.log('beforeUnmount')
  },
  unmounted() {
    
    
    console.log('unmounted')
  },
  // 不生效，但也不会报错
  beforeDestroy() {
    
    
    console.log('beforeDestroy')
  },
  // 不生效，但也不会报错
  destroyed() {
    
    
    console.log('destroyed')
  },
  setup() {
    
    
     // 先执行
     console.log('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')
    })
    let num = ref(1)
    return{
    
    
      num
    }
  }
}
</script>