vue3 缓存下来的钩子函数

Vue 3中的缓存钩子函数是指在使用`<keep-alive>`组件包裹的组件中，当组件被缓存时，会触发特定的钩子函数。具体来说，缓存钩子函数包括`activated`和`deactivated`。

`activated`钩子函数在组件被激活时调用，即从缓存中恢复到活动状态时触发。而`deactivated`钩子函数在组件被缓存时调用，即从活动状态转变为缓存状态时触发。

下面是一个示例，展示了Vue 3中缓存钩子函数的用法：

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

<script>
export default {
  data() {
    return {
      currentComponent: 'components1',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'components1' ? 'components2' : 'components1';
    },
  },
  components: {
    components1: {
      created() {
        console.log("1激活created钩子函数");
      },
      activated() {
        console.log("1激活activated钩子函数");
      },
      mounted() {
        console.log("1激活mounted钩子函数");
      },
      template: '<div>Component 1</div>',
    },
    components2: {
      created() {
        console.log("2激活created钩子函数");
      },
      activated() {
        console.log("2激活activated钩子函数");
      },
      mounted() {
        console.log("2激活mounted钩子函数");
      },
      template: '<div>Component 2</div>',
    },
  },
};
</script>

在上述示例中，当点击"Toggle Component"按钮时，会切换显示两个组件(components1和components2)。当组件被缓存时，会触发相应的缓存钩子函数。