首先在平常开发中，有部分组件没有必要多次初始化的时候，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，Keep-Alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，也就是所谓的组件缓存。
<Keep-Alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
- <Keep-Alive>常用于缓存不活动的组件实例，而不是销毁他们。它包含以下属性:
include-string | RegExp | Array。只有名称匹配的组件会被缓存。exclude-string | RegExp | Array。任何名称匹配的组件都不会被缓存。max-number | string。最多可以缓存多少组件实例。
<Keep-Alive>的功能
- keepalive是vue3中的一个全局组件
- keepalive 本身不会渲染出来，也不会出现在dom节点当中，但是它会被渲染为vnode,通过vnode可以跟踪到keepalive中的cache和keys，当然也是在开发环境才可以，build打包以后没有暴露到vnode中
- keepalive 最重要的功能就是缓存组件
在render钩子中完成以下步骤:
- 首先获取插槽的内容(即router-view);
- 调用方法获取第一个子组件，获取到该组件的name, 如果有name属性就用name,没有的话就用标签名;
- 用获取到的name和传入的include、exclude属 性进行匹配，如果匹配不成功，则表示不缓存该组件，直接返回该组件的vnode,否则走下一步缓存;
- 缓存机制:用拿到的name去this.cache对象中寻找是否有该值，如果有则表示命中缓存，直接从缓存中拿vnode的组件实例，如果没有命中，就是这个组件还没有被缓存，以这个组件的key为键，组件vnode为值，把它存入this.cache中，并且把key存入this.keys中，此时再判断this.keys中
keep-alive的中还运用 了LRU算法:决定要缓存
- 组件实例时根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。 如果缓存对象中存在该组件实例，直接取出缓存值并更新该key在this.keys中的位置。否则在 this.cache对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max的设置值，超过则删除最近最久未使用的实例(即下标为0的那个key)。 LRU算法设计原则:如果一个数据在最近一段时间没有被访问到，那么在将来它被访问的可能性也很小。
LRU算法:
- 新数据插入到数组头部;
- 每当缓存数据被访问时，将数据移到数组头部;
- 当数组满的时候，将尾部的数据丢弃。
