keep-alive缓存

简介

keep-alive 是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive 是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中

作用

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。

原理

在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode实例进行渲染。

VNode：虚拟DOM，其实就是一个JS对象

参数 （Props）

• include ：字符串或正则表达式，只有名称匹配的组件会被缓存
• exclude ：字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max：数字。最多可以缓存多少组件实例 即定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

内存管理的一种页面置换算法，对于在内存中但又不用的数据块（内存块）叫做LRU，操作系统会根据哪些数据属于LRU而将其移出内存而腾出空间来加载另外的数据。

keep-alive用法

• 在动态组件中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

• 在v