共计 3609 个字符，预计需要花费 10 分钟才能阅读完成。
keep-alive
keep-alive 是 vue.js 的内置组件，它能够把不活动的组件的实例保存在内存中，而不是直接的销毁，它是一个抽象组件，不会被渲染到真实 DOM 中，也不会出现在父组件链中。它提供了 exclude 和 include 两个属性，允许组件有条件的缓存。
使用
<keep-alive>
<comment></comment>
</keep-alive>
上面的 comment 组件会被缓存起来。
<keep-alive>
<coma v-if=”test”></coma>
<comb v-else></comb>
</keep-alive>
<button @click=”abc”></button>
export default{
data(){
reurn{
test:true
}
},
methods:{
abc(){
this.test=!this.test;
}
}
}
点击 button 的时候 coma 组件和 comb 组件会发生切换，但这时候两个组件的状态会被缓存起来，假如说 a 和 b 组件中都有一个 input 标签，这时切换 input 标签的值不会改变。
props
keep-alive 组件提供了 include 和 exclude 两个属性来进行有条件的缓存，二者都可以用逗号分隔字符串、正则表达式或则数组表示。
<keep-alive include=”a”>
<component></component>
</keep-alive>
//name 名为 a 的组件会被缓存起来
<keep-alive exclude=”a”>
<component></component>
</keep-alive>
//name 名为 a 的组件将不会被缓存。
生命钩子
keep-alive 提供了两个生命钩子，actived 与 deactived。因为 keep-alive 会把组件保存到内存中，并不会销毁或则重新构建，所以不会调用组件的 creted 等方法，需要使用 actived 和 deactived 两个钩子判断组件是否处于活动状态。
深入 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 () {
/* 得到 slot 插槽中的第一个组件 */
const vnode: VNode = getFirstComponentChild(this.$slots.default)
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// check pattern
/* 获取组件名称，优先获取组件的 name 字段，否则是组件的 tag */
const name: ?string = getComponentName(componentOptions)
/* name 不在 inlcude 中或者在 exlude 中则直接返回 vnode（没有取缓存）*/
if (name && (
(this.include && !matches(this.include, name)) ||
(this.exclude && matches(this.exclude, name))
)) {
return vnode
}
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
/* 如果已经做过缓存了则直接从缓存中获取组件实例给 vnode，还未缓存过则进行缓存 */
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance
} else {
this.cache[key] = vnode
}
/* keepAlive 标记位 */
vnode.data.keepAlive = true
}
return vnode
}
首先通过 getFirstComponentChild 获取第一个子组件，获取该组件的 name（存在组件名则直接使用组件名，否则会使用 tag）。接下来会将这个 name 通过 include 与 exclude 属性进行匹配，匹配不成功（说明不需要进行缓存）则不进行任何操作直接返回 vnode。
/* 检测 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 通过这两种方式分别检测是否匹配当前组件。
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance
} else {
this.cache[key] = vnode
}
接下来的事情很简单，根据 key 在 this.cache 中查找，如果存在则说明之前已经缓存过了，直接将缓存的 vnode 的 componentInstance（组件实例）覆盖到目前的 vnode 上面。否则将 vnode 存储在 cache 中。最后返回 vnode（有缓存时该 vnode 的 componentInstance 已经被替换成缓存中的了）。用 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 的实现。
/* 修正 cache */
function pruneCache (cache: VNodeCache, current: VNode, filter: Function) {
for (const key in cache) {
/* 取出 cache 中的 vnode */
const cachedNode: ?VNode = cache[key]
if (cachedNode) {
const name: ?string = getComponentName(cachedNode.componentOptions)
/* name 不符合 filter 条件的，同时不是目前渲染的 vnode 时，销毁 vnode 对应的组件实例（Vue 实例），并从 cache 中移除 */
if (name && !filter(name)) {
if (cachedNode !== current) {
pruneCacheEntry(cachedNode)
}
cache[key] = null
}
}
}
}
/* 销毁 vnode 对应的组件实例（Vue 实例）*/
function pruneCacheEntry (vnode: ?VNode) {
if (vnode) {
vnode.componentInstance.$destroy()
}
}
遍历 cache 中的所有项，如果不符合 filter 指定的规则的话，则会执行 pruneCacheEntry。pruneCacheEntry 则会调用组件实例的 $destroy 方法来将组件销毁。
