vue2 keep-alive 源码解读

1、LRU算法

LRU（ least recently used）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据

2. keep-alive

keep-alive 是 vue 中的内置组件，使用 KeepAlive 后，被包裹的组件在经过第一次渲染后的 vnode 会被缓存起来，然后再下一次再次渲染该组件的时候，直接从缓存中拿到对应的 vnode 进行渲染，并不需要再走一次组件初始化，减少了 script 的执行时间，性能更好。

3、vue2的实现

实现原理： 通过 keep-alive 组件插槽，获取第一个子节点。根据 include、exclude 判断是否需要缓存，通过组件的 key，判断是否命中缓存。利用 LRU 算法，更新缓存以及对应的 keys 数组。根据 max 控制缓存的最大组件数量。

先看 vue2 的实现：

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
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      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
        // 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.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

可以看到 <keep-alive> 组件的实现也是一个对象，注意它有一个属性 abstract 为 true，是一个抽象组件，它在组件实例建立父子关系的时候会被忽略，发生在 initLifecycle 的过程中：

// 忽略抽象组件
let parent = options.parent
if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent
  }
  parent.$children.push(vm)
}
vm.$parent = parent

然后在 created 钩子里定义了 this.cache 和 this.keys，用来缓存已经创建过的 vnode。

<keep-alive> 直接实现了 render 函数，执行 <keep-alive> 组件渲染的时候，就会执行到这个 render 函数，接下来我们分析一下它的实现。

首先通过插槽获取第一个子元素的 vnode：

const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)

<keep-alive> 只处理第一个子元素，所以一般和它搭配使用的有 component 动态组件或者是 router-view。

然后又判断了当前组件的名称和 include、exclude 的关系：

// check pattern
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
}
​
function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
  if (Array.isArray(pattern)) {
    return pattern.indexOf(name) > -1
  } else if (typeof pattern === 'string') {
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    return pattern.test(name)
  }
  return false
}

组件名如果不满足条件，那么就直接返回这个组件的 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
  // 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 的顺序放在了最后一个；否则把 vnode 设置进缓存，如果配置了 max 并且缓存的长度超过了 this.max，还要从缓存中删除第一个。

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null 
  remove(keys, key)
}

除了从缓存中删除外，还要判断如果要删除的缓存的组件 tag 不是当前渲染组件 tag，则执行删除缓存的组件实例的 $destroy 方法。