vue3 keepalive

<template>
  <div>
    <button @click="currentComponent = 'Home'">Go to Home</button>
    <button @click="currentComponent = 'About'">Go to About</button>

    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import { ref } from 'vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

export default {
  components: {
    Home,
    About
  },
  setup() {
    const currentComponent = ref('Home');

    return {
      currentComponent
    };
  }
};
</script>

解释说明

1. <keep-alive> 标签:

   • <keep-alive> 是 Vue 3 中的一个内置组件，用于缓存动态组件，避免重复渲染。当组件在 <keep-alive> 内部被切换时，它的状态会被保存，不会被销毁和重新创建。

2. 动态组件:

   • 使用 <component :is="currentComponent"> 来动态切换组件。currentComponent 是一个响应式变量，根据按钮点击事件来改变其值，从而切换显示的组件。

3. 按钮控制:

   • 两个按钮分别绑定到 currentComponent 的不同值 (Home 和 About)，点击按钮会改变 currentComponent 的值，进而切换显示的组件。

4. 缓存效果:

   • 当你从一个组件切换到另一个组件再切回来时，由于有 <keep-alive> 包裹，组件的状态会被保留，不会重新初始化或重新渲染。