有时我们不希望组件被重新渲染影响使用体验，亦或者出于某些性能优化需求需要存储非活跃组件状态，可以使用keep-alive内置组件
- keep-alive有三个props，分别是include、exclude和max，用于限制标签内缓存组件的数量。其中include和exclude可以接受（无需v-bind）、Array或RegExp（两个都需要v-bind），如果使用了include则只有include中的组件会被缓存，如果使用了exclude则exclude中的组件会被排除在缓存之外。
- max接收一个number类型参数，用于限制缓存组件的最大数量。若超出限定范围，使用频率最少的组件会被取消缓存
- 此外，使用keep-alive组件后还会生成两个新的生命周期钩子onActivated和onDeactivated，分别在组件由缓存->活跃时触发和组件从活跃->缓存时触发。
切记，onActivated和onDeactivated这两个函数必须写在子组件中，否则将无法触发！
完整代码：
App.vue
<template>
<!-- KeepAlive内部仅允许一个活跃的组件,其他非活跃的组件将被缓存 -->
<KeepAlive>
<A v-if="flag"></A>
<B v-else></B>
</KeepAlive>
<button @click="flag = !flag">切换组件</button>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
let flag = ref(true)
</script>
<style scoped></style>
A.vue
<template>
<form>
<input type="checkbox" /> <span>A</span>
<br />
<input type="checkbox" /> <span>B</span>
</form>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated, onDeactivated } from 'vue'
// 必须写在子组件中
onActivated(() => {
console.log('组件A的keep-active被触发了')
})
onDeactivated(() => {
console.log('组件A的keep-active被缓存了')
})
</script>
<style scoped></style>
B.vue
<template>
<form>
<input type="checkbox" /> <span>C</span>
<br />
<input type="checkbox" /> <span>D</span>
</form>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated, onDeactivated } from 'vue'
onActivated(() => {
console.log('组件B的keep-active被触发了')
})
onDeactivated(() => {
console.log('组件B的keep-active被缓存了')
})
</script>
<style scoped></style>
