vue3keep-alive的钩子函数

Vue3中，`<keep-alive>`组件提供了一些新的生命周期钩子函数，包括`onActivated()`和`onDeactivated()`。这两个钩子函数分别在被包含在`<keep-alive>`中的组件被激活和停用时执行。除此之外，`<keep-alive>`组件还提供了其他的生命周期钩子函数，包括`onBeforeMount()`、`onMounted()`、`onBeforeUpdate()`、`onUpdated()`、`onBeforeUnmount()`、`onUnmounted()`和`onErrorCaptured()`。这些钩子函数的作用和Vue2.x中的生命周期钩子函数类似，可以用于在组件的不同生命周期阶段执行一些操作。

下面是一个示例代码，演示了如何在Vue3中使用`<keep-alive>`组件和其生命周期钩子函数：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  },
  // 生命周期钩子函数
  onActivated() {
    console.log('Component activated')
  },
  onDeactivated() {
    console.log('Component deactivated')
  }
}
</script>

在这个示例中，我们定义了两个组件`ComponentA`和`ComponentB`，并在父组件中使用`<keep-alive>`组件包裹这两个组件。当点击按钮时，父组件会切换当前显示的子组件。同时，我们在父组件中定义了`onActivated()`和`onDeactivated()`两个生命周期钩子函数，用于在子组件被激活和停用时输出一些信息。