vue3、vue2 生命周期

父组件

<template>
  <h2>APP</h2>
  <button @click="isShow = !isShow">切换</button>
  <hr>
  <Child v-if="isShow"/>
</template>
  
<script lang="ts">
  
import { defineComponent, ref, reactive } from 'vue'
import Child from './components/child.vue';
export default defineComponent({
  name: 'App',
  components: {
    Child
  },
  setup() {
    const isShow = ref(true)
    return {
      isShow
    }
  }
});
</script>

子组件

<template>
    <h2>子组件msg: {{ msg }}</h2>
    <button @click="update">更新</button>
</template>
    
<script lang="ts">
    
import { defineComponent, ref,onMounted,onUpdated,onUnmounted,  onBeforeMount, onBeforeUpdate,onBeforeUnmount } from 'vue'
    
export default defineComponent({
    name: 'Child',
    setup() {
        const msg = ref('试试')
        function update() {
            msg.value += '=='
        }
        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')
        })
        return {
            msg,
            update
        }
    },
    beforeCreate () {
        console.log('2.x中的beforeCreate()')
    },

    created () {
        console.log('2.x中的created')
    },

    beforeMount () {
        console.log('2.x中的beforeMount')
    },

    mounted () {
        console.log('2.x中的mounted')
    },

    beforeUpdate () {
        console.log('2.x中的beforeUpdate')
    },

    updated () {
        console.log('2.x中的updated')
    },

    beforeUnmount () {
        console.log('2.x中的beforeUnmount')
    },

    unmounted () {
        console.log('2.x中的unmounted')
    }
    
});
</script>

按我的理解吧，vue3的生命周期好像都在vue2的前头。代码运行结果像这么回事