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

源码解析：

props

props可传3个参数

    export default {
      name: 'keep-alive',
      abstract: true,

      props: {
        include: patternTypes,    //缓存白名单，keep-alive会缓存命中的组件
        exclude: patternTypes,    //缓存黑名单，被命中的组件将不会被缓存
        max: [String, Number]     //缓存组件上限，超出上限使用LRU的策略置换缓存数据；
      },

created

     created () {
        this.cache = Object.create(null)      //cache用来缓存虚拟dom
        this.keys = []       //1.  keys用来缓存虚拟dom的键集合
      },

mounted

    mounted () {
        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])
      }

获取keep-alive包裹着的第一个子组件对象及其组件名；
根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例（VNode），否则执行第三步；
根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在this.keys中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步；
在this.cache对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max的设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）

destroyed

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

1、 this.cache中缓存的VNode实例；

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

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

总结：

最后总结一下keep-alive的原理：

1、获取 keep-alive 包裹着的第一个子组件对象及其组件名；如果 keep-alive 存在多个子元素，keep-alive 要求同时只有一个子元素被渲染。所以在开头会获取插槽内的子元素，调用 getFirstComponentChild 获取到第一个子元素的 VNode。

2、根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例（VNode），否则开启缓存策略。

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

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

Vue之keep-alive源码解析及原理