vue3中的 keep-alive

Vue3中的`keep-alive`是用于管理组件缓存的一个功能。它允许你在路由切换时，将某些组件保留在内存中而不是每次切换都重新渲染它们。这在需要展示大量相似组件，并且页面跳转频繁的情况下很有用，可以提高应用性能，尤其是对于数据密集型或计算成本高的组件。

`<keep-alive>`标签通常配合`v-if`或`v-show`指令一起使用，例如：

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

<script>
export default {
  data() {
    return {
      viewComponent: 'Home', // 当前显示的组件名
    };
  },
  computed: {
    components() {
      return ['Home', 'About', 'Contact']; // 可能会切换的所有组件列表
    }
  },
  watch: {
    $route(to, from) {
      this.viewComponent = this.components.includes(to.name) ? to.name : this.components[0]; // 根据路由切换到对应的组件
    }
  }
};
</script>

当用户访问的路由匹配`components`数组中已缓存过的组件时，该组件会被保留并复用。如果组件不再被需要，Vue会在适当的时候释放其占用的资源。