Vue之Keep-alive

主体分析

abstract: true

keep-alive与router-view是抽象组件，并不会渲染。keep-alive组件也是一个抽象组件。

props

支持正则/字符串/数组形式的inclue/exclude值，用以缓存特定的值

max为可以缓存的最大组件数目 

created/mounted/destroyed生命周期函数

created初始化的时候创建缓存对象与keys数组(数组存储所有组件的key)

mounted挂载真实dom的时候，创建用户watcher，当include/excluede有不需要缓存的组件，就直接销毁掉并且清空缓存。

destoryed，当keep-alive组件销毁的时候销毁所有的组件，清空所有的缓存。

render函数

因为是抽象组件，所以不会渲染视图，那么如何才能不渲染视图呢？

直接返回子组件vnode实例即可。

首先会获得匿名插槽的内容，关于插槽可以看Vue中的插槽解析之普通插槽。紧接着会获取匿名插槽中的第一个子组件。

1. 该子组件不符合缓存条件，直接return 子组件vnode

2. 如果符合缓存条件就，查看缓存中是否有该组件缓存，如果有缓存就直接读取；否则就添加缓存。

3. 如果缓存的组件个数超过了用户定义的max个就销毁组件。

这里，做了一个小处理，keys其实相当于是一个队列，先进先出。即，超过缓存限制后，keys数组第一个组件(先进)会被销毁。每次创建/读取缓存后都会将创建/读取的缓存放入队列末尾。

data.keepAlive的作用

1. 搭配VueRouter使用

在之前的VueRouter源码解析(三)：router-link/router-view组件文章中，也提到了keep-alive。文章中也说了如果，父组件有data.keepAlive属性，就会读取父组件的缓存。

2. 生命周期钩子actived/deactived

当组件内有data.keepAlive的时候，组件data.hook属性就会调用用户添加的actived/deactived回调函数。

工具函数

matches

正则与数组的一些方法.

pruneCacheEntry

作用就是清除keep-alive组件的函数。

其参数分别为组件的缓存(this.cache)，目标组件的key，缓存过的组件的keys(this.keys)，当前渲染的组件vnode。

特别注意的是除了超过最大缓存数max的其他情况清除缓存都是只有三个参数。

而清理超过最大缓存组件的时候会传入第四个参数，这是考虑到队列的第一个组件与当前渲染的组件tag相同的情况，避免调用调用组件destroy钩子。但是缓存还是会删除。

pruneCache

这里就是自定义watcher的回调函数。对于不符合inclue或者符合exclude条件的组件都会从缓存中清除。