vue3.2 keepalive

Vue 3.2 的 keep-alive 组件是用来缓存组件的，可以避免在组件切换时重复渲染，提高应用性能。而在 Vue 2.x 中，keep-alive 组件只能缓存静态组件，而在 Vue 3.2 中则可以缓存动态组件。

使用方式和 Vue 2.x 中的 keep-alive 组件类似，只需将需要缓存的组件包裹在 keep-alive 标签内即可。例如：

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

在这个例子中，通过包裹在 keep-alive 组件中的 router-view 组件实现了路由组件的缓存。在切换路由时，组件会被缓存起来，下次再次访问时可以直接从缓存中读取，从而提高了应用的加载速度和性能。

需要注意的是，keep-alive 组件只会缓存有 name 属性的组件，因此在需要缓存的组件上添加 name 属性是必须的。例如：

<template>
  <div>
    <keep-alive>
      <router-view v-slot="{ Component }">
        <component :is="Component" :key="$route.fullPath" :name="$route.name"></component>
      </router-view>
    </keep-alive>
  </div>
</template>

在这个例子中，通过使用 v-slot 获取到当前需要渲染的组件，并将组件的 name 属性设置为当前路由的 name，从而实现了动态组件的缓存。