keep-Alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-Alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：
- include：只有名称匹配的组件会被缓存（用户操作的一些数据切换之后再切换回来不会消失）
- exclude：任何名称匹配的组件都不会被缓存（用户操作的一些数据切换之后再切换回来内容已经清空）
- max：最多可以缓存多少组件实例（一旦缓存达到设置的这个数字，那么缓存组件中最近没有被访问的会被销毁）
咱们一起进入主题
<!-- 展示按钮的区域 --><div class="title"><template v-for="(item, i) in listbtn" :key="i"><button @click="indexBtn = i" :class="[indexBtn == i ? 'bianse' : '']">{{ item }}</button></template></div><!-- 展示页面的区域 --><div class="content"><!-- 1.用 <keep-alive></keep-alive> 包起来是保存用户之前在组件里的一些操作，等用户切换之后再切回来，之前的操作还保存着 --> <!-- 2.include中文是允许，我这里填的home,name，表示只允许保存用户在home和name页面中操作的一些数据，然而没有填age页面，表示用户在age页面中操作的数据将不保存，用户切换之后再返回就没有当初所操作的数据了，全部展示初始值 --> <keep-alive include='home,name'><!-- 1.要用 <component></component> --><!-- 2.固定的 :is --><!-- 3.要使用:is，右边的值必须是全局组件或者是局部组件 --><component :is=" listbtn[indexBtn] "></component> </keep-alive></div>
<script>
import age from '@/view/age.vue'
import home from '@/view/home.vue'
import names from '@/view/name.vue'export default {name: 'App',components: {age, // 注册age组件home, // 注册home组件names // 注册names组件},data() {return {listbtn: ['age', 'home', 'names'], // 注意这里是数组类型indexBtn: 0 // 切换时的变量}},activated(){ // 这个生命周期是专门针对<keep-alive></keep-alive>组件被（创建）的时候所展示的console.log('被展示的时候')},deactivated(){ // 这个生命周期是专门针对<keep-alive></keep-alive>组件被（销毁）的时候所展示的console.log('离开的时候')}
}
</script>注意：当我们使用<keep-alive></keep-alive>的时候，我们不能使用 created 或者 mounted 生命周期
我们想知道何时进入到组件，何时离开组件，我们要用：
activated() 和 deactivated() 这个生命周期来监听
今天就分享到这里了，快去试试吧。 ┏(＾0＾)┛
