组件保活，keep-Alive缓存

Vue3的keep-alive是一个内置组件，用于在组件之间缓存和重用已经渲染的内容。它可以缓存并保留组件的状态，以便在下次渲染时快速恢复。

在某些情况下，使用keep-alive可以显著提高应用程序的性能，尤其是当应用程序包含复杂的组件或需要频繁地切换组件时。它可以避免不必要的重新渲染和数据加载，从而提高应用程序的响应速度和用户体验。

当需要在多个组件之间切换时，可以使用keep-alive来缓存已经渲染的组件。这通常发生在以下情况下：

当前组件需要被缓存以便下次快速渲染。
当前组件将被销毁并重新创建，但是您希望保留其状态和属性。
当前组件具有昂贵的数据加载或计算，您希望避免重复操作。

举个简单的例子吧，有一个计时器组件，你不希望切换到其他组件页面后切换回来，原来的组件重新创建销毁导致计时重新开始吧？

使用keep-alive很简单，只需将需要缓存的组件包裹在<keep-alive>标签中即可。例如：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </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';
    }
  }
}
</script>

在上面的示例中，我们使用<keep-alive>标签包裹了一个动态组件，并在按钮点击时切换组件。每次切换组件时，<keep-alive>都会缓存已经渲染的组件，以便在下次切换时快速恢复。