vue3的keep-alive

Vue3中的`<keep-alive>`组件是一个用于缓存动态组件的活动生成策略。当你在一个视图内频繁切换显示状态时，例如在路由导航中，可以使用它来保留那些不会立即销毁但仍可能会再次活跃的组件实例。这样可以提高应用性能，尤其是对于一些计算资源消耗较大的组件，避免不必要的渲染和数据初始化。

`<keep-alive>`的工作原理是将组件标记为“活跃”或“已挂起”。当用户离开当前组件并返回时，如果该组件之前被缓存，它将从缓存中恢复而不是重新创建。你可以通过`include`或`exclude`属性控制哪些组件应该被缓存，也可以使用`meta`选项来自定义每个组件的缓存规则。

以下是一个基本使用示例：

<template>
  <div>
    <router-view v-slot="{ component }">
      <keep-alive :include="['Home', 'About']">
        <component :is="component" key=" componentName "></component>
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {
  computed: {
    // 根据路由名称确定哪些组件需要缓存
    include () {
      return this.$route.meta.include || ['Home', 'About'];
    }
  }
}
</script>