京东一面：说一下KeepAlive的使用及理解

keep-alive这个Vue内置组件相信大家一定不陌生了，本篇文章带着大家一块再回顾下它的使用，一块研究下它底层源码是如何编写实现组件缓存的吧！

keep-alive介绍

keep-alive作为Vue内置组件，它的作用是在多个组件动态切换时缓存组件实例，而不是销毁。它可以避免组件反复创建和渲染，有效提升系统性能。它拥有两个独立的生命周期钩子函数activated 和deactivated，在keep-alive包裹的组件切换时当前组件实例执行deactivated钩子函数，被访问的组件实例执行activated钩子函数。

 

keep-avlie可以设置3个props属性，分别为：

1.include：字符串、正则表达式或数组。只有名称匹配的组件会被缓存。

2.exclude：字符串、正则表达式或数组。任何名称匹配的组件都不会被缓存。

3.max：数字。最多可以缓存多少组件实例。一旦数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

其匹配时首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称。

使用原则：当某些场景下不需要页面/组件重新加载时可以使用keep-alive

源码分析

function pruneCacheEntry(

cache: VNodeCache,

key: string,

keys: Array<string>,

current?: VNode

) {

const cached = cache[key];

/* 将没有被渲染的组件销毁 */

if (cached && (!current ||

cached.tag !== current.tag)) {

cached.componentInstance.$destroy(); // 执行组件的destory钩子函数

}

cache[key] = null;

remove(keys, key);

}

export default {

name: "keep-alive",

abstract: true,

props: {

// 缓存白名单

include: [String, RegExp,

Array],

// 缓存黑名单

exclude: [String, RegExp,

Array],

// 最大缓存数量

max: [String, Number],

},

created() {

// 缓存虚拟DOM,即缓存的组件实例

this.cache =

Object.create(null);

// 缓存虚拟DOM的键集合

this.keys = [];

},

destroyed() {

// 删除所有缓存的虚拟DOM

for (const key in this.cache)

{

pruneCacheEntry(this.cache, key, this.keys);

}

},

mounted() {

// 监听黑白名单变动

this.$watch("include", (val) => {

pruneCache(this,

(name) => matches(val, name));

});

this.$watch("exclude", (val) => {

pruneCache(this,

(name) => !matches(val, name));

});

},

render(){

...

}

};

看得出来以上代码跟我们定义Vue组件的过程一样，声明props对include、exclude及max属性进行了类型校验。在created钩子中定义cache保存vnode（虚拟DOM）及keys保存 vnode的key。再mounted钩子中监听include、exclude实现实时更新cache中的数据，pruneCache底层调用pruneCacheEntry函数实现。在destroyed钩子中将缓存的vnode及keys进行清除，通过遍历cache获取虚拟DOM通过调用自身$destroy()将vnode卸载。

export default {

…

render() {

/* 获取默认插槽中的第一个组件节点 */

const slot =

this.$slots.default;

const vnode =

getFirstComponentChild(slot);

/* 获取该组件节点的componentOptions */

const componentOptions =

vnode && vnode.componentOptions;

if (componentOptions) {

/* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */

const name =

getComponentName(componentOptions);

const { include,

exclude } = this;

/* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */

if (

(include

&& (!name || !matches(include, name))) ||

(exclude

&& name && matches(exclude, name))

) {

return vnode;

}

const { cache, keys }

= this;

/* 获取组件的key值 */

const key =

vnode.key ==

null

?

componentOptions.Ctor.cid +

(componentOptions.tag ? `::${componentOptions.tag}` : "")

:

vnode.key;

/* 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */

if (cache[key]) {

vnode.componentInstance = cache[key].componentInstance;

// make current

key freshest

remove(keys,

key);

keys.push(key);

} else {

/* 如果没有命中缓存，则将其设置进缓存 */

cache[key] =

vnode;

keys.push(key);

// prune oldest

entry

/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */

if (this.max &&

keys.length > parseInt(this.max)) {

pruneCacheEntry(cache, keys[0], keys, this._vnode);

}

}

vnode.data.keepAlive =

true;

}

return vnode || (slot

&& slot[0]);

},

}

首先获取keep-alive包裹的第一个子组件及其组件名；根据黑白名单匹配组件名决定是否需要缓存，不缓存直接返回vnode，缓存则执行后续代码；根据组件Cid和tag属性生成缓存vnode的key值，在缓存对象cache中通过key查找vnode，若有值直接使用缓存的vnode，并更新该key在keys中的位置，若没有则进行缓存vnode并在keys中保存key值，检查cache缓存中的vnode数量是否超过max值，若超过则删除最久未使用的vnode及在keys中删除对应的key。

总结

本篇keep-alive分析到此就结束了，本篇的重点就是，以键值对的方式将缓存的组件保存在cache中，在render函数中通过props中include及exclude属性判断组件是否需要缓存，max控制缓存数量，在超出最大缓存数量的时候，再调用pruneCacheEntry方法去卸载组件，并更新缓存组件列表keys。