【手撕源码】vue2.x中keep-alive源码解析

（2）源码

地址：源码地址

// 源码位置：src/core/components/keep-alive.js
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.cacheVNode()
    // 这里借助 watch 监控 include  和 exclude 
  // 如果有变化的话，则按照最新的 include 和 exclude 更新 this.cache
  // 将不满足 include、exclude 限制的 缓存vnode 从 this.cache 中移除  
  this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  updated() {
    this.cacheVNode()
  },
  methods:{
   cacheVNode() {
      const { cache, keys, vnodeToCache, keyToCache } = this
      if (vnodeToCache) {
        const { tag, componentInstance, componentOptions } = vnodeToCache
        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
      }
    }
 },
  render(){
    //下面详细介绍
  }
}

（3）abstract:true

设置为true时，表面该组件为抽象组件，抽象组件不会和子组件建立父子关系，组件实例会根据这个属性决定是否忽略该组件，所以并不会有节点渲染在页面中。

（4）pruneCacheEntry函数

destoryed周期中循环了所有缓存的组件，并用 pruneCacheEntry进行处理，pruneCacheEntry做了什么事？

// src/core/components/keep-alive.js
function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy() // 执行组件的destory钩子函数
  }
  cache[key] = null  // cache中对象的key设为null
  remove(keys, key) // 删除keys对应的元素
}

destoryed周期中，删除缓存组件的所有数组，pruneCacheEntry主要做了这几件事：