Vue.minxin的使用场景和原理？

keep-alive 主要是组件缓存，采用的是LRU算法。最近最久未使用法。

常用的两个属性include/exclude，允许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

abstract: true, // 抽象组件

props:{

include: patternTypes,  // 要缓存的有哪些

exclude: patternTypes, // 要排除的有哪些

max: [String, Number] //最大缓存数量 

}

if(cache[key]) { // 通过key 找到缓存，获取实例

vnode.componentInstance = cache[key].componentInstance

remove(keys, key) //将key删除掉 

keys.push(key) // 放到末尾 

} else {

cache[key] = vnode // 没有缓存过 

keys.push(key) //存储key

if(this.max && keys.length > parseInt(this.max)) { // 如果超过最大缓存数 

// 删除最早缓存的 

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

}

}

vnode.data.keepAlive = true // 标记走了缓存

了解更多前端面试相关问题欢迎关注小编技术专栏！