vue3.0中keep- alive

在 Vue 3.0 中，`<keep-alive>` 组件依然存在，但是相比于 Vue 2.x 版本，它的使用方式有了一些变化。

在 Vue 2.x 中，`<keep-alive>` 组件可以包裹需要缓存的组件，例如：

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

这样，当路由切换时，`<router-view>` 中的组件会被缓存起来，以便下次快速渲染。

在 Vue 3.0 中，`<keep-alive>` 组件的用法和 Vue 2.x 有所不同。现在，`<keep-alive>` 只能用作一个包裹组件，不能直接包裹其它组件。例如：

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

这样写是错误的，因为 `<keep-alive>` 直接包裹了 `<router-view>`。正确的写法是将 `<keep-alive>` 包裹在 `<router-view>` 中，然后再将需要缓存的组件放到 `<keep-alive>` 中。例如：

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
</template>

这样，在路由切换时，`<component>` 中的组件会被缓存起来。注意，由于 Vue 3.0 中的动态组件写法略有不同，因此需要使用 `:is` 属性来动态指定组件类型。同时，`<router-view>` 中使用了插槽语法，用于获取路由组件。