keep-alive是什么

keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

通常在使用组件时候去使用它

<keep-alive>
      <components :is="confs">
      </components>
 </keep-alive>

源码分析

props

有三个参数

include 缓存白名单，keep-alive 会缓存命中的组件
exclude 缓存黑名单，keep-alive 被命中的组件不会缓存
max 组件缓存上限，超出缓存上限使用LRU的策略限制缓存

LRU算法的基本思路

假设我们使用哈希链表来缓存用户信息，目前缓存了4个用户，用户按照时间顺序从链表右端插入：

情景一：当访问用户5时，由于哈希链表中没有用户5的数据，从数据库中读取出来插入到缓存中

情景二：挡访问用户2时，由于哈希链表中有用户2的数据，我们把它掐断，放到链表最右段

情景三：同情景二，这次访问用户4的数据

情景四：当用户访问用户6，用户6在缓存中没有，需要插入到链表中，但此时链表长度已满，我们把最左端的用户删掉，然后插入用户6

说明：我们仔细回顾一下，当缓存命中时，我们就把它放到最右端，也就是说排在右边的是最近被使用过的，那左边的当然是相对较少被访问过的，所以当缓存不命中的时候，我们就把最左边的剔除掉，所以这里就体现了最近最少使用的原则。

created

 created() {
    this.cache = Object.create(null)    // 创建缓存列表
    this.keys = []        //创建缓存组件的key列表
  },

created方法很简单，就初始化了两个变量

cache用来缓存虚拟dom；
keys用来缓存虚拟dom的键集合

mounted

  mounted() {// 会监控 include 和 exclude 属性 进行组件的缓存处理
    this.cacheVNode()
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },

在mounted这个钩子中对include和exclude参数进行监听，然后实时地更新（删除）this.cache对象数据。pruneCache函数的核心也是去调用pruneCacheEntry。

render

 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
        // 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
        remove(keys, key)
        keys.push(key)
      } else {
        // delay setting the cache until update
        this.vnodeToCache = vnode
        this.keyToCache = key
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }

1 获取 keep-alive 包裹着的第一个子组件对象及其组件名；

2 根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例 VNode ，否则执行第三步；

3 根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在 this.keys 中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步；

4 在 this.cache 对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max的设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）；

5 最后将该组件实例的 keepAlive 属性值设置为true；

destroyed

destroyed() {
    for (const key in this.cache) {  //keep-alive销毁时,清空所有的缓存和key
        pruneCacheEntry(this.cache, key, this.keys)
    }
  },
 
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)
}

this.cache中缓存的VNode实例；
遍历调用pruneCacheEntry函数删除缓存VNode还要对应执行组件实例的destory函数；

keep-alive组件的渲染

keep-alive不会生成真正的DOM节点，这是怎么做到的？

1 vue在初始化生命周期的时候，为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件。在keep-alive中，设置了abstract:true,那么Vue就会跳过该组件实例；

2 最后构建的组件树中就不会包含keep-alive组件，那么由组件树渲染成的DOM树自然也不会有keep-alive相关的节点了；

vue keep-alive