1. 作用

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

我们希望组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <keep-alive> 内置组件将这些动态组件包装起来。

2. 用法

定义两个组件

// A.vue
<template>
    <div>组件A <input type="text"></div>
</template>


// B.vue
<template>
    <div>组件B <input type="text"></div>
</template>

在父组件中引入它们

// App.vue
<template>
    <button @click="changeCom">切换组件</button>
    <!-- <keep-alive> 只能包裹一个根标签 -->
    <keep-alive>
        <A v-if="comId"></A>
        <B v-else></B>
    </keep-alive>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import A from './components/A.vue'
import B from './components/B.vue'

let comId = ref(true)

const changeCom = () => {
    comId.value = !comId.value
}
</script>

可以看到，当点击按钮时，组件 A 和 B 会不断切换，而且状态可以保持

3. keep-alive 身上的 props

3.1 include 和 exclude

分别表示 包含 和 不包含 哪些组件，这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组

3.2 max

表示一个 <keep-alive> 标签下最多缓存多少个组件实例，采用 LRU 算法淘汰那些超过 max 数量的组件实例

4. 新增的生命周期

onActivated 在首次挂载，以及每次从缓存中被重新插入的时候调用

onDeactivated 在从 DOM 上移除、进入缓存，以及组件卸载时调用