概念
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
作用
在组件切换过程中将状态保留在内存中，也就是将不活动的组件的内容进行一个缓存，当组件再次被使用时，之前的内容数据不会消失。防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| include | 字符串或者正则表达式 | 只有与属性值匹配的组件才会被缓存 |
| exclude | 字符串或者正则表达式 | 除了与属性值匹配的之外的组件才会被缓存，与属性值匹配的组件不会被缓存 |
| max | 数字 | 最多可以缓存多少个组件实例 |
生命周期函数
- actived
在keep-alive组件被使用时触发actived函数
进入页面获取最新数据时可以在该函数阶段获取数据，相当于created函数的作用
- deactived
在keep-alive组件被停用，切换到其他组件时触发deactived函数
案例
- 1、先创建几个切换的路由，将视图用keep-alive组件报包裹起来
keep-alive1.png
- 2、将每个组件取名
keep-alive2.png
- 3、keep-alive组件不填属性时，表示所有的组件里的数据都会被缓存
keep-alive3.png
- 4、keep-alive组件使用include属性时，表示只有当组件名称为login的组件的数据才会被缓存，其他组件的数据不会被缓存
keep-alive4.png
- 5、keep-alive组件使用exclude属性时，表示只有当组件名称为login的组件的数据不会被缓存，其他组件的数据才会被缓存
keep-alive5.png
- 6、keep-alive组件使用max属性时，最大可以缓存的组件数量
keep-alive6.png
