vue3使用keepAlive

官网路径：KeepAlive | Vue.js

KeepAlive 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。所以想保留之前操作的状态，就要使用keep Alive了。

简单使用可以在官网上看看，在这里想记录一下在使用过程中遇到的一些问题。

1. 我是在路由切换时候，使用keepAlive,如下：

<router-view v-slot="{ Component }">

        <transition name="fade">

            <keep-alive :include="viewStore.cachedViews">

                <component :is="Component" />

            </keep-alive>

        </transition>

    </router-view>

:is是用来绑定指定组件，这里是与路由对应的页面绑定。:include就是keepAlive的包括，KeepAlive会 默认会缓存内部的所有组件实例，通过 include 来修改该行为。这是官网的解释，但是我在网上搜到的以及我使用是把缓存的组件状态，存储在一个自定义仓库中，可以更好的去操作缓存的组件，总的来说这里使用 include 属性，绑定缓存组件名数组。

2.好了问题来了，第一个问题提到了绑定缓存组件名数组，重点是缓存的是组件名，所以你要给每个组件起一个名字，搜了之后说是vue3语法糖，不能跟vue2一样直接起一个name名字，所以另辟捷径，如下：

<script lang="ts">

export default {

  namYour_name'

};

</script>

<script setup lang='ts'>

你的代码

</script>

给他加一个就好了。这里有个注意点是这个地方写的名字要跟你路由中定义的组件名字一致，不然会报错。

当然官网上也说了，如下：

我是没实现，只能使用上面的方法。