我们都知道keep-alive是用来做页面缓存的，那kepp-alive到底缓存的是什么呢，keep-alive又是怎么实现的呢？这篇文档来一探究竟。
定义
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
这个定义也就解答我们的第一个问题，keep-alive是用来缓存组件的。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
简单得说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提升系统性能。
LRU缓存淘汰算法
keep-alive有一个max属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉，而这里所运用的就是LRU算法。
LRU（least recently used）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据。
LRU的主体思想在于：如果数据最近被访问过，那么将来被访问的几率也更高。
这里对于LRU算法的具体实现就不描述了，想了解的同学可以自行查资料。
原理
- 使用LRU缓存机制进行缓存，max限制缓存表的最大容量。
- 根据设定的include/exclude（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例。
- 根据组件ID和tag生产缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在this.keys中的位置（更新key的位置是实现LRU置换策略的关键）。
- 获取节点名称，或者根据节点cid等信息拼出当前组件名称。
- 获取keep-alive包裹的第一个子组件对象及其组件名。
这么一看好像有点懵逼，别急，我们直接贴源码分析一波。
export default {
name: 'keep-alive',
abstract: true, // 抽象组件
props: {
include: patternTypes, // 要缓存的组件
exclude: patternTypes, // 不缓存的组件
max: [String, Number] // 缓存组件最大个数
},
created () {
// 当前缓存的组件实例
this.cache = Object.create(null)
// 用来记录缓存的顺序
this.keys = []
},
destroyed () {
// 移除当前所有缓存
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted () {
// 当props上的include或者exclude变化时，移除缓存
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
},
render () {
const slot = this.$slots.default
// 获取第一个子组件
const vnode: VNode = getFirstComponentChild(slot)
// 获取组件配置项
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// check pattern
const name: ?string = getComponentName(componentOptions)
const { include, exclude } = this
// 如果没匹配到
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
// 直接返回当前组件实例
return vnode
}
const { cache, keys } = this
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
// 本地不同的组件可能被相同的构造函数构建，所以仅仅使用cid作为key是不够的
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
// 如果命中，也就是当前组件需要缓存
if (cache[key]) {
// 取出已经缓存好的实例赋值给当前组件实例
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
// 让当前key是最新的
remove(keys, key) // 移除当前key
keys.push(key) // 调整key的最新位置（这也是LRU算法的关键）
} else {
// 如果没匹配到，就把当前组件实例赋值给缓存对象
cache[key] = vnode
keys.push(key)
// prune oldest entry
// 如果当前缓存的组件实例已经超过最大值 去掉最先进来的组件实例
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true // 标记组件为keep-alive
}
return vnode || (slot && slot[0]) // 返回vnode
}
}
总结
Vue内部将DOM节点抽象成了一个个的VNode节点，keep-alive组件缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件（include与exclude）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。
具体缓存过程如下：
- 声明有序集合
keys作为缓存容器，存入组件的唯一key值。 - 在缓存容器
keys中，越靠前的key值意味着被访问得越少也就越优先被淘汰。 - 渲染函数执行时，若命中缓存时，则从
keys中删除当前命中的key,并往keys末尾追加key值，刷新该key的优先级。 - 未命中缓存时，则
keys追加缓存数据key值，若此时缓存数据长度大于max最大值，则删除最旧的数据。
