• include定义要缓存的组件名。注意，不是引入的别称，就是组件的文件名
• exclude定义不缓存的组件名。一样的，这里是组件的文件名
• max最多缓存多少个组件。如果组件个数大于max，会自动剔除掉不常用的
• 使用keep-alive后会增加两个生命周期：onDeactivated、onActivated(在子组件内使用)

<template><div class="yyx-box"><el-button type="primary" @click="change">切换组件</el-button><!-- include定义要缓存的组件名。注意，不是引入的别称，就是组件的文件名 --><!-- exclude定义不缓存的组件名。一样的，这里是组件的文件名 --><!-- max最多缓存多少个组件。如果组件个数大于max，会自动剔除掉不常用的 --><!-- 使用keep-alive后会增加两个生命周期：onDeactivated、onActivated(在子组件内使用) --><keep-alive :include="['test1','test2']" :exclude="['test2']" :max="1"><Test1 v-if="flag"></Test1><Test2 v-else></Test2></keep-alive></div></template><script setup lang='ts'>import { ref } from 'vue'import Test1 from '../components/test1.vue';import Test2 from '../components/test2.vue';let flag = ref<boolean>(true)const change  = ()=>{flag.value = !flag.value}</script>
<style scoped lang='scss'>@include b(box){height: 100%;overflow: auto;}</style>