Vue2.x中 keep-alive 组件实现原理

keep-alive

keep-alive Vue内置抽象组件

• 当包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
• 它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

Props

• include、exclude 两个组件props参数，会拿当前组件的名称是否缓存；
• max 是当前keep-alive组件缓存组件的量，如果超过会删除之前的缓存的组件实例及信息(缓存策略)；

created

created () {
    this.cache = Object.create(null)
    this.keys = []
},

初始化缓存

• cache是缓存组件实例信息
• keys 暂存组件key，会排序；

mounted

mounted () {
    this.cacheVNode()
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
},

• 当前组件挂载后，调用 cacheVNode 判断是否缓存当前组件；
• 再监听 include、exclude变化，根据include、exclude新值判断是否能缓存当前组件实例；

render方法

在mounted挂载前会先调render方法；

const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
    ... 
}
return vnode || (slot && slot[0])

根据插槽获取第一个组件，返回vnode；

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
}

根据componentOptions获取组件名称，判断是否对vnode处理：

• include有值 且 (没有组件名称 或 不在include内) 直接返回vnode；
• exclude有值 且 有组件名称 且 在exclude内 直接返回vnode；

const { cache, keys } = this
// 根据组件options，获取组件缓存key
const key: ?string = vnode.key == null
    // same constructor may get registered as different local components
    // so cid alone is not enough (#3269)
    ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
    : vnode.key
// 已缓存过 直接使用缓存实例
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    // make current key freshest
    // 这个很重要更新缓存key排序，后续缓存超量会删除长时间未使用的缓存
    remove(keys, key)
    keys.push(key)
} else {
    // delay setting the cache until update
    // 接下来cacheVNode方法调用后 缓存当前实例
    this.vnodeToCache = vnode
    this.keyToCache = key
}

vnode.data.keepAlive = true

cacheVNode方法

缓存当前实例

cacheVNode() {
  const { cache, keys, vnodeToCache, keyToCache } = this
  if (vnodeToCache) {
    const { tag, componentInstance, componentOptions } = vnodeToCache
    // 缓存组件实例+key
    cache[keyToCache] = {
      name: getComponentName(componentOptions),
      tag,
      componentInstance,
    }
    keys.push(keyToCache)
    // prune oldest entry
    // 缓存策略，超过设置最大缓存数、清除之前许久未使用缓存
    if (this.max && keys.length > parseInt(this.max)) {
      pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
    this.vnodeToCache = null
  }
}

updated

同 mounted，但第一次调 cacheVNode 缓存后 vnodeToCache已清空，render直接读取缓存，不会再走缓存逻辑；

updated () {
    this.cacheVNode()
},

destroyed

• keep-alive组件销毁，会调用pruneCacheEntry方法，
• 超过缓存数量，也会调用pruneCacheEntry方法，

destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
},

pruneCacheEntry方法

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

• 根据 key 销毁缓存实例
• 清除keep-alive缓存组件对应的缓存信息

keep-alive 缓存机制

最近最少使用策略

• 以时间作为参考，如果数据最近被访问过，那么将来被访问的几率会更高;
• 如果以一个数组去记录数据，当有一数据被访问时，该数据会被移动到数组的末尾，表明最近被使用过，
• 当缓存溢出时，会删除数组的头部数据，即将最不频繁使用的数据移除。