keep-alive

这个功能是vue特有的，在react中，我暂时没有找过相关组件，所以第一次用这个标签时，觉得特别神奇，跳转路由竟然会保存视图状态。

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

它提供了include与exclude两个属性，允许组件有条件地进行缓存。

具体内容可以参考官网。

用法

<keep-alive>
    <component></component>
</keep-alive>

这里的component组件会被缓存起来。

举个例子

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else></comb>
</keep-alive>
<button @click="test=handleClick">请点击</button>

export default {
    data () {
        return {
            test: true
        }
    },
    methods: {
        handleClick () {
            this.test = !this.test;
        }
    }
}

在点击button时候，组件会进行切换，但是这个时候两个组件的状态都能被保存起来，步如coma与comb组件都有一个input标签，那么input标签的内容是不会因组件切换而消失的。

props

keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

生命钩子

keep-alive提供了两个生命钩子，分别是activated与deactivated。

因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

深入keep-alive组件实现

说完了keep-alve组件的使用，我们从源码角度看一下keep-alive组件是如何实现组件的缓存的

created 与 destroyed钩子

created钩子会创建一个cache对象，用于作为缓存容器，保存vnode节点

created () {
    /* 缓存对象 */
    this.cache = Object.create(null)
}

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

render

接下来是render函数。

render() { 
  // 得到slot插槽的第一个组件
  const vnode : VNode = getFirstComponentChild(this.$slots.default)
  // ts写法 componentOptions默认值为vnode.componentOptions 且不能为空
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions

  if(componentOptions) { 
    // 获取组件名称
    const name ?:string = getComponentName(componentOptions)

    // name不在include中或者在exclude中，则直接返回vnode(没有取缓存)
    if(name && (
      (this.include && !matches(this.include,name)) || 
      (this.exclude && matches(this.exclude,name))
    )) { 
      return vnode 
    }
    
    const key : ?string = vnode.key == null ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
    : vnode.key 
    // 如果已经做过缓存则直接从缓存中获取组件实例给vnode，未缓存过的则进行缓存
    if(this.cache[key]) { 
      vnode.componentInstance = this.cache[key].componentInstance
    } else { 
      // 没有缓存，进行缓存
      this.cache[key] = vnode 
    }
  }
  return vnode 
}

这个cache居然使用set来存储，正常来讲不是使用hashtable更好么？

/* 检测name是否匹配 */
function matches (pattern: string | RegExp, name: string): boolean {
  if (typeof pattern === 'string') {
    /* 字符串情况，如a,b,c */
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    /* 正则 */
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}

检测include与exclude属性匹配的函数很简单，include与exclude属性支持字符串如"a,b,c"这样组件名以逗号隔开的情况以及正则表达式。matches通过这两种方式分别检测是否匹配当前组件。

接下来的事情很简单，根据key在this.cache中查找，如果存在则说明之前已经缓存过了，直接将缓存的vnode的componentInstance（组件实例）覆盖到目前的vnode上面。否则将vnode存储在cache中。

最后返回vnode（有缓存时该vnode的componentInstance已经被替换成缓存中的了）。

watch

用watch来监听pruneCache与pruneCache这两个属性的改变，在改变的时候修改cache缓存中的缓存数据。

watch: {
    /* 监视include以及exclude，在被修改的时候对cache进行修正 */
    include (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => matches(val, name))
    },
    exclude (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => !matches(val, name))
    }
},

让我们来看看修正函数pruneCache的实现。

/**
 * @param {VNodeCache} cache 缓存列表
 * @param {VNode} 当前keep-alive下的视图节点
 * @param {function 过滤函数
 */
function pruneCache(cache:VNodeCache,current:VNode,,filter:Function) { 
  for(const key in cache) { 
    // 取出cache中的vnode 
    const cacheNode = ?VNode = cache[key]
    if(cachedNode) { 
      const name: ?string = getComponentName(cachedNode.componentOptions)
      // 如果该缓存组件不在缓存名单了，则进入暗杀名单
      if(name && !filter(name)) { 
        // 不是当前视图的都干掉
        if(cacheNode !== current) { 
          pruneCacheEntry(cachedNode)
        }
        // 删除缓存集合中的对象
        cache[key] = null
      }
    }
  }
}

/* 销毁vnode对应的组件实例（Vue实例） */
function pruneCacheEntry (vnode: ?VNode) {
  if (vnode) {
    vnode.componentInstance.$destroy()
  }
}

遍历cache中的所有项，如果不符合filter指定的规则的话，则会执行pruneCacheEntry。pruneCacheEntry则会调用组件实例的$destroy方法来将组件销毁。

最后

keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件（pruneCache与pruneCache）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。