浅谈Vue页面级缓存解决方案feb-alive(上)

const key: ?string = vnode.key == null
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
remove(keys, key)
keys.push(key)
} else {
cache[key] = vnode
keys.push(key)
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true
}
return vnode || (slot && slot[0])
}

上面分析到，在执行createElm(keepAliveVnode)的过程中，会执行keep-alive组件的实例化及挂载($mount)，而在挂载的过程中，会执行keep-alive的render函数，之前分析过，在render函数中，可以通过this.$slot获取到子组件的vnode，从上面源码中，可以知道，keep-alive只处理默认插槽的第一个子组件，言外之意如果在keep-alive中包裹多个组件的话，剩下的组件会被忽略，例如:

<keep-alive>
 <Foo />
 <Bar />
</keep-alive>
// 只会渲染Foo组件

继续分析，在拿到Foo组件vnode后，判断了componentOptions，由于我们的Foo是一个组件，所以这里componentOptions是存在的，进到if逻辑中，此处include 表示只有匹配的组件会被缓存，而 exclude 表示任何匹配的组件都不会被缓存，demo中并没有设置相关规则，此处先忽略。

const { cache, keys } = this
cache, keys是在keep-alive组件的create钩子中生成的，用来存储被keep-alive缓存的组件的实例以及对应vnode的key
created () {
 this.cache = Object.create(null)
 this.keys = []}

继续下面

const key: ?string = vnode.key == null
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
if (cache[key]) {
 vnode.componentInstance = cache[key].componentInstance
 remove(keys, key)
 keys.push(key)
} else {
 cache[key] = vnode
 keys.push(key)
 if (this.max && keys.length > parseInt(this.max)) {
  pruneCacheEntry(cache, keys[0], keys, this._vnode)
 }
}

首先，取出vnode的key，如果vnode.key存在则使用vnode.key，不存在则用

componentOptions.Ctor.cid + (componentOptions.tag ?::${componentOptions.tag}: '')

作为存储组件实例的key，据此可以知道，如果我们不指定组件的key的话，对于相同的组件会匹配到同一个缓存，这也是为什么最开始在描述keep-alive的时候强调它是一个组件级的缓存方案。

那么首次渲染的时候，cache和keys都是空的，这里就会走else逻辑