vue3 keepalive使用

<template>
  <div>
    <!-- 使用 keep-alive 包裹需要缓存的组件 -->
    <keep-alive>
      <!-- 动态组件，通过 v-if 控制显示隐藏 -->
      <component :is="currentComponent" />
    </keep-alive>

    <!-- 切换按钮 -->
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前显示的组件名称
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      // 切换当前显示的组件
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    // 注册组件
    ComponentA: {
      template: '<div>Component A</div>',
      created() {
        console.log('Component A is created');
      },
      activated() {
        console.log('Component A is activated');
      },
      deactivated() {
        console.log('Component A is deactivated');
      }
    },
    ComponentB: {
      template: '<div>Component B</div>',
      created() {
        console.log('Component B is created');
      },
      activated() {
        console.log('Component B is activated');
      },
      deactivated() {
        console.log('Component B is deactivated');
      }
    }
  }
};
</script>

解释说明：

1. keep-alive 标签：用于包裹需要缓存的动态组件。这样可以避免组件在切换时被销毁和重新创建，从而提高性能并保持组件状态。

2. component 标签：这是一个动态组件标签，:is 属性绑定到 currentComponent 数据属性，用于决定渲染哪个组件。

3. toggleComponent 方法：点击按钮时切换 currentComponent 的值，从而在 ComponentA 和 ComponentB 之间切换。

4. 生命周期钩子：

   • created：组件实例创建完成时调用。
   • activated：组件被激活时调用（即从缓存中恢复）。
   • deactivated：组件被停用时调用（即进入缓存）。

通过这种方式，你可以轻松实现组件的缓存功能，并且可以在控制台中看到组件的生命周期变化。