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

<keep-alive>
 <router-view></router-view>
</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 () {
 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
 // 获取第一个组件，也就和官方说明的一样，keep-alive要求同时只有一个子元素被渲染，如果你在其中有 v-for 则不会工作。
 const vnode: VNode = getFirstComponentChild(slot)
 // 判断是否存在组件选项，也就是说只对组件有效，对于普通的元素则直接返回对应的vnode
 const componentOptions: "htmlcode">

created () {
 // 存储组件缓存
 this.cache = Object.create(null)
 this.keys = []
}


由于路由切换并不会销毁keep-alive组件，所以缓存是一直存在的（嵌套路由中，子路由外层的keep-alive情况会不一样，后续会提到）


继续看下keep-alive在缓存的存储和读取的具体实现，先用一个简单的demo来描述keep-alive对于组件的缓存以及恢复缓存的过程




let Foo = {
 template: '<div class="foo">foo component</div>',
 name: 'Foo'
}
let Bar = {
 template: '<div class="bar">bar component</div>',
 name: 'Bar'
}
let gvm = new Vue({
 el: '#app',
 template: `
  <div id="#app">
   <keep-alive>
    <component :is="renderCom"></component>
   </keep-alive>
   <button @click="change">切换组件</button>
  </div>
 `,
 components: {
  Foo,
  Bar
 },
 data: {
  renderCom: 'Foo'
 },
 methods: {
  change () {
   this.renderCom = this.renderCom === 'Foo' "htmlcode">

function anonymous(
) {
 with(this){return _c('div',{attrs:{"id":"#app"}},[_c('keep-alive',[_c(renderCom,{tag:"component"})],1),_c('button',{on:{"click":change}})],1)}
}



可使用在线编译：https://cn.vuejs.org/v2/guide/render-function.html#模板编译


根据上面的render函数可以知道，vnode生成的过程是深度递归的，先创建子元素的vnode再创建父元素的vnode。

所以首次渲染的时候，在生成keep-alive组件vnode的时候，Foo组件的vnode已经生成好了，并且作为keep-alive组件vnode构造函数（_c）的参数传入。




_c('keep-alive',[_c(renderCom,{tag:"component"})



生成的keep-alive组件的vnode如下




{
 tag: 'vue-component-2-keep-alive',
 ...
 children: undefined,
 componentInstance: undefined,
 componentOptions: {
  Ctor: f VueComponent(options),
  children: [Vnode],
  listeners: undefined,
  propsData: {},
  tag: 'keep-alive'
 },
 context: Vue {...}, // 调用 $createElement/_c的组件实例, 此处是根组件实例对象
 data: {
  hook: {
   init: f,
   prepatch: f,
   insert: f,
   destroy: f
  } 
 }
}



此处需要注意组件的vnode是没有children的，而是将原本的children作为vnode的componentOptions的children属性，componentOptions在组件实例化的时候会被用到，同时在初始化的时候componentOptions.children最终会赋值给vm.$slots，源码部分如下




// createComponent函数
function createComponent (Ctor, data, context, children, tag) {
 // 此处省略部分代码
 ...
 var vnode = new VNode(
  ("vue-component-" + (Ctor.cid) + (name "-" + name) : '')),
  data, undefined, undefined, undefined, context,
  { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children },
  asyncFactory
 );
 return vnode
}



Vue最后都会通过patch函数进行渲染，将vnode转换成真实的dom，对于组件则会通过createComponent进行渲染




function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
 var i = vnode.data;
 if (isDef(i)) {
  var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
  if (isDef(i = i.hook) && isDef(i = i.init)) {
  i(vnode, false /* hydrating */);
  }
  // after calling the init hook, if the vnode is a child component
  // it should've created a child instance and mounted it. the child
  // component also has set the placeholder vnode's elm.
  // in that case we can just return the element and be done.
  if (isDef(vnode.componentInstance)) {
  initComponent(vnode, insertedVnodeQueue);
  insert(parentElm, vnode.elm, refElm);
  if (isTrue(isReactivated)) {
   reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
  }
  return true
  }
 }
 }



接下去分两步介绍

  
keep-alive组件本身的渲染
  
keep-alive包裹组件的渲染，本例中的Foo组件和Bar组件

先讲讲本例中针对keep-alive组件本身的渲染

  
根组件实例化
  
根组件$mount
  
根组件调用mountComponent
  
根组件生成renderWatcher
  
根组件调用updateComponent
  
根组件调用vm.render()生成根组件vnode
  
根组件调用vm.update(vnode)
  
根组件调用vm.patch(oldVnode, vnode)
  
根组件调用createElm(vnode)
  
在children渲染的时候，如果遇到组件类型的vnode则调用createComponent(vnode)，而正是在这个过程中，进行了子组件的实例化及挂载（$mount）

所以在执行createElm(keepAliveVnode)的过程中会对keep-alive组件的实例化及挂载，而在实例化的过程中，keep-alive包裹的子组件的vnode会赋值给keep-alive组件实例的$slot属性，所以在keep-alive实例调用render函数时，可以通过this.$slot拿到包裹组件的vnode，在demo中，就是Foo组件的vnode，具体分析下keep-alive组件的render函数




render () {
 const slot = this.$slots.default
 const vnode: VNode = getFirstComponentChild(slot)
 const componentOptions: "htmlcode">

<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: "htmlcode">

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更新的重任




function updateChildComponent (
 vm,
 propsData,
 listeners,
 parentVnode,
 renderChildren
) {
 if (process.env.NODE_ENV !== 'production') {
 isUpdatingChildComponent = true;
 }

 // determine whether component has slot children
 // we need to do this before overwriting $options._renderChildren
 var hasChildren = !!(
 renderChildren ||    // has new static slots
 vm.$options._renderChildren || // has old static slots
 parentVnode.data.scopedSlots || // has new scoped slots
 vm.$scopedSlots !== emptyObject // has old scoped slots
 );

 // ...

 // resolve slots + force update if has children
 if (hasChildren) {
 vm.$slots = resolveSlots(renderChildren, parentVnode.context);
 vm.$forceUpdate();
 }

 if (process.env.NODE_ENV !== 'production') {
 isUpdatingChildComponent = false;
 }
}




updateChildComponent函数主要更新了当前组件实例上的一些属性，这里包括props，listeners，slots。我们着重讲一下slots更新，这里通过resolveSlots获取到最新的包裹组件的vnode，也就是demo中的Bar组件，之后通过vm.$forceUpdate强制keep-alive组件进行重新渲染。（小提示：当我们的组件有插槽的时候，该组件的父组件re-render时会触发该组件实例$fourceUpdate，这里会有性能损耗，因为不管数据变动是否对slot有影响，都会触发强制更新，根据vueConf上尤大的介绍，此问题在3.0会被优化），例如




// Home.vue
<template>
 <Artical>
  <Foo />
 </Artical>
</tempalte>



此例中当Home组件更新的时候，会触发Artical组件的强制刷新，而这种刷新是多余的。


继续，在更新了keep-alive实例的forceUpdate，之后再次进入到keep-alive的render函数中




render () {
 const slot = this.$slots.default
 const vnode: VNode = getFirstComponentChild(slot)
 // ...
}



此时render函数中获取到vnode就是Bar组件的vnode，接下去的流程和Foo渲染一样，只不过也是把Bar组件的vnode缓存到keep-alive实例的cache对象中。


当组件从Bar再次切换到Foo时


针对keep-alive组件逻辑还是和上面讲述的一样

  
执行prepatch
  
复用keep-alive组件实例
  
执行updateChildComponent，更新$slots
  
触发vm.$forceUpdate
  
触发keep-alive组件render函数

再次进入到render函数，这时候cache[key]就会匹配到Foo组件首次渲染时候缓存的vnode了，看下这部分逻辑




const key: "htmlcode">

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
 var i = vnode.data;
 if (isDef(i)) {
  var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
  if (isDef(i = i.hook) && isDef(i = i.init)) {
  i(vnode, false /* hydrating */);
  }
  // after calling the init hook, if the vnode is a child component
  // it should've created a child instance and mounted it. the child
  // component also has set the placeholder vnode's elm.
  // in that case we can just return the element and be done.
  if (isDef(vnode.componentInstance)) {
  initComponent(vnode, insertedVnodeQueue);
  insert(parentElm, vnode.elm, refElm);
  if (isTrue(isReactivated)) {
   reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
  }
  return true
  }
 }
 }



可以根据上面对于keep-alive源码的分析，此处isReactivated为true，接下去会进入到vnode生成的时候挂在的生命周期init函数




var componentVNodeHooks = {
 init: function init (vnode, hydrating) {
 if (
  vnode.componentInstance &&
  !vnode.componentInstance._isDestroyed &&
  vnode.data.keepAlive
 ) {
  // kept-alive components, treat as a patch
  var mountedNode = vnode; // work around flow
  componentVNodeHooks.prepatch(mountedNode, mountedNode);
 } else {
  var child = vnode.componentInstance = createComponentInstanceForVnode(
  vnode,
  activeInstance
  );
  child.$mount(hydrating "htmlcode">

if (isDef(vnode.componentInstance)) {
 // 将实例上的dom赋值给vnode
 initComponent(vnode, insertedVnodeQueue);
 // 插入dom
 insert(parentElm, vnode.elm, refElm);
if (isTrue(isReactivated)) {
 reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
}
return true
}



至此，当组件从Bar再次切换到Foo时，实例与dom都得到了复用，达到一个很高的体验效果！而我们之后要实现的feb-alive就是基于keep-alive实现的。
Vue页面级缓存解决方案feb-alive (下)


参考文档
vue-navigation 

Vue.js 技术揭秘 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：基于Vue2-Calendar改进的日历组件（含中文使用说明）
            
下一篇：vue 实现小程序或商品秒杀倒计时