<script setup lang="ts">
import { onActivated, onDeactivated, shallowRef } from 'vue'
import CompA from '../components/CompA.vue'
import CompB from '../components/CompB.vue'
const current = shallowRef(CompA)
onActivated(() => {
  console.log('组件被激活');
})
onDeactivated(() => {
  console.log('组件被失活');
})
</script>

<template>
  <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <keep-alive>
      <component :is="current"></component>
    </keep-alive>
</template>

onActivated和onDeactivated方法位置放错了，应该放到CompA.vue和CompB.vue里面