keep-alive原理

最新推荐文章于 2025-11-18 09:41:10 发布

原创最新推荐文章于 2025-11-18 09:41:10 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

VUE知识专栏收录该内容

6 篇文章

订阅专栏

keep-alive

组件复用，提高性能
缓存不太使用的组件，而不是直接销毁

参数

include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存
exclude：[String,RegExp,Array] 匹配到的组件都不缓存
max： [String,Number] 数字，最多能缓存多少组件实例。在新实例创建之前，缓存中最就没有使用的实例会被销毁

props:三个属性 include exclude max

created:定义两个属性

this.cache = Object.create(null)
this.keys = []

this.cache是一个对象，用来存储需要缓存的组件

this.cache = {
    'key1':'组件1',
    'key2':'组件2'
    、、、
}

this.keys是以一个数组，用来存储每个需要缓存的组件的key，即对应this.cache对象中的键值。

destoryed

该钩子会遍历this.cache对象，然后将那些被缓存的并且当前没有处于被渲染状态的组件都销毁掉，并将其从this.cache对象中移除

destoryed() {
    for (const key in this.cache) {
        pruneCacheEntery(this.cache,key,this.keys);
    }
}

function pruneCacheEntery(cache,key,keys,current) {
    const cached = cache[key]
    if (cached &&& (!current || cached.tag !== current.tag)) {
        cached.componentInstance.$destory()
    }
    cache[key] = null
    remove(keys,key)
}

mounted

在mounted中观测 include exclude的变化

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val,name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val,name))
    })
}

render

keep-alive如何实现缓存

获取第一个子组件的节点

const slot = this.$solts.default
const vnode = getFirstComponentChild(solt)

只处理第一个子元素，所以一般和它搭配使用的有 component 动态组件或者是 router-view。

获取该组件节点的名称

/* 获取该组件节点的名称 */
const name = getComponentName(componentOptions)

/* 优先获取组件的name字段，如果name不存在则获取组件的tag */
function getComponentName (opts: ?VNodeComponentOptions): ?string {
  return opts && (opts.Ctor.options.name || opts.tag)
}

用组件名称跟include exclude 中的普配规则取匹配

如果name与index规则不匹配或者与exclude规则匹配，表示不缓存该组件，直接返回这个组件的vnode就可以

const { include, exclude } = this
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.cach对象中寻找是否有该值，如果有，说明组件有缓存，命中缓存
/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
} else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}
// 如果没有，则将组件存入缓存