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

cache[key] = vnode
keys.push(key)
if (this.max && keys.length > parseInt(this.max)) {
 pruneCacheEntry(cache, keys[0], keys, this._vnode)
}

以key作为cache的健进行存储Foo组件vnode

(注意此时vnode上面还没有componentInstance)，

这里利用了对象存储的原理，之后进行Foo组件实例化的时候会将其实例赋值给vnode.componentInstance，那么在下次keep-alive组件render的时候就可以获取到vnode.componentInstance。

所以首次渲染仅仅是在keep-alive的cache上面，存储了包裹组件Foo的vnode。

针对包裹组件的渲染

上面已经讲到执行了keep-alive的render函数，根据上面的源码可以知道，render函数返回了Foo组件的vnode，那么在keep-alive执行patch的时候，会创建Foo组件的实例，然后再进行Foo组件的挂载，这个过程与普通组件并没有区别，在此不累述。

当组件从Foo切换到Bar时

本例中由于renderCom属性的变化，会触发根组件的renderWatcher，之后会执行patch(oldVnode, vnode)
在进行child vnode比较的时候，keep-alive的新老vnode比较会被判定为sameVnode，之后会进入到patchVnode的逻辑

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
 if (oldVnode === vnode) {
  return
 }
 // 此处省略代码
 ...
 var i;
 var data = vnode.data;
 if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
  i(oldVnode, vnode);
 }
 // 此处省略代码
 ...
}

由于我们的keep-alive是组件，所以在vnode创建的时候，会注入一些生命周期钩子，其中就包含prepatch钩子，其代码如下

prepatch: function prepatch (oldVnode, vnode) {
 var options = vnode.componentOptions;
 var child = vnode.componentInstance = oldVnode.componentInstance;
 updateChildComponent(
  child,
  options.propsData, // updated props
  options.listeners, // updated listeners
  vnode, // new parent vnode
  options.children // new children
 );
}

由此可知，keep-alive组件的实例在此次根组件重渲染的过程中会复用，这也保证了keep-alive组件实例上面之前存储cache还是存在的

var child = vnode.componentInstance = oldVnode.componentInstance;

下面的updateChildComponent这个函数非常关键，这个函数担任了Foo组件切换到Bar组件的关键任务。我们知道，由于keep-alive组件是在此处是复用的，所以不会再触发initRender，所以vm.$slot不会再次更新。所以在updateChildComponent函数担起了slot更新的重任