Vue3系列教程-KeepAlive缓存组件状态 （A）

官网：https://cn.vuejs.org/guide/built-ins/keep-alive.html#keepalive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

例如：当你输入一个标题，搜索一个文章之后，进入详情浏览完毕后，进行回退，发现搜索框的标题已经没了，页面重新初始化了，是不是很郁闷，KeepAlive 可以保证回退页面出来后，状态已经存在。

第一步 给需要缓存的组件命名

//新增的命名块
<script lang="ts">
export default {
  name: "list-component"
}
</script>

<script setup lang="ts">
... 原来的Vue3代码
</script>

备注：虽然多了一个script ，但是这种方式最简单

第一步 KeepAlive 包裹动态组件

在路由切换窗口，用KeepAlive组件包裹 注意：include=“需要缓存的组件名”

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

最大缓存实例数​

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

//官网案例  
<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

缓存实例的生命周期​

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子：

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>