vue单页缓存方案分析及实现

如上keep-alive源码，其中render函数是这样实现的，要渲染的试图组件作为插槽内容被获取到，当渲染到路径匹配到的视图组件时会根据vnode存储的内容拿到对应的name,一次将这些组件实例放到变量cache中，这样根据路由就可以找到缓存的vnode，返回给createComponent方法去执行initComponent，vue组件渲染这块的代码如下

function initComponent (vnode, insertedVnodeQueue) {
 if (isDef(vnode.data.pendingInsert)) {
 insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
 vnode.data.pendingInsert = null
 }
 vnode.elm = vnode.componentInstance.$el
 if (isPatchable(vnode)) {
 invokeCreateHooks(vnode, insertedVnodeQueue)
 setScope(vnode)
 } else {
 // empty component root.
 // skip all element-related modules except for ref (#3455)
 registerRef(vnode)
 // make sure to invoke the insert hook
 insertedVnodeQueue.push(vnode)
 }
}

这里会有 vnode.elm 缓存了 vnode 创建生成的 DOM 节点。所以对于首次渲染而言，除了在 <keep-alive> 中建立缓存，和普通组件渲染没什么区别。从进入到返回的大致执行流程如下

能实现的功能

能够把要缓存的组件渲染的vnode记到cache里边，当返回的时候用缓存里边的dom直接渲染，还有keep-alive组件提供的include 和 exclude属性，可以有条件的缓存想缓存的组件，如果配置了 max 并且缓存的长度超过了这个max的值，还要从缓存中删除第一个

存在的问题

存在的问题是存储vnode节点的key是name,也就是定义路由时组件对应的name，这就会导致同样的path，不同参数的时候打开的是从cache里边拿到的vnode，会渲染出同样的视图出来，但是很多业务场景都是根据参数来显示不同内容，而keep-alive底层并没有对此做扩展，可以看下keep-alive源码

 const key: ?string = vnode.key == null
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
  if (cache[key]) {
  vnode.componentInstance = cache[key].componentInstance
  // make current key freshest
  remove(keys, key)
  keys.push(key)
  } 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.key就是路由里边定义的name，所以要用这套方案来实现的根据不同参数展示不同视图的功能就要对这里的key做改造，但是keep-alive是vue自带的，没法改底层，然后就诞生了我的第二套方案