浅谈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: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
  // 检测include和exclude
  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
  // 如果指定了子组件的key则使用，否则通过cid+tag生成一个key
  const key: ?string = vnode.key == null
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
  // 判断是否存在缓存
  if (cache[key]) {
  // 直接复用组件实例，并更新key的位置
  vnode.componentInstance = cache[key].componentInstance
  remove(keys, key)
  keys.push(key)
  } else {
  // 此处存储的vnode还没有实例，在之后的流程中通过在createComponent中会生成实例
  cache[key] = vnode
  keys.push(key)
  // 当缓存数量大于阈值时，删除最早的key
  if (this.max && keys.length > parseInt(this.max)) {
   pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
  }
  // 设置keepAlive属性，createComponent中会判断是否已经生成组件实例，如果是且keepAlive为true则会触发actived钩子。
  vnode.data.keepAlive = true
 }
 return vnode || (slot && slot[0])
 }
}

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

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' ? 'Bar': 'Foo'
  }
 }
})

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

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

{
 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
  } 
 }
}

// 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
}

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
  }
 }
 }

render () {
 const slot = this.$slots.default
 const vnode: VNode = getFirstComponentChild(slot)
 const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
  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
  ? 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])
 }

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

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)
 }
}

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

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);
 }
 // 此处省略代码
 ...
}

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
 );
}

var child = vnode.componentInstance = oldVnode.componentInstance;

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;
 }
}

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

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

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)
 }
}

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
  }
 }
 }

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 ? vnode.elm : undefined, hydrating);
 }
 },
 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
 );
 },
 ...
}

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
}