在 Vue.js 中，<keep-alive> 组件使用了 LRU（Least Recently Used）算法来缓存组件。LRU 算法是一种缓存淘汰策略，它根据最近使用的时间来确定哪些数据被保留在缓存中。
<keep-alive> 组件是 Vue.js 提供的一个抽象组件，用于在多次切换组件时缓存组件实例，以提高性能。它会缓存那些频繁使用的组件实例，并在需要时将其保持在内存中。当组件不再需要时，LRU 算法就会决定是否将其从缓存中移除，以释放内存空间。
Vue.js 使用 LRU 算法来管理 <keep-alive> 组件缓存的组件实例。当缓存容量达到设定的上限时，会根据最近使用的时间选择最不常用的组件实例进行淘汰。这样可以尽量保留最常用的组件实例，并在内存使用达到一定阈值时进行清理，优化应用的性能和内存管理。
需要注意的是，LRU 算法并非 keep-alive 组件的唯一缓存策略，它也可以与其他策略（例如 FIFO 或 LFU）相结合使用，以根据具体场景和需求做出更好的决策。
LRU用法体验
const lruCache = new LRUCache(2)
lruCache.set(1, 1) // {1=1}
lruCache.set(2, 2) // {1=1, 2=2}
console.info(lruCache.get(1)) // 1 {2=2, 1=1}
lruCache.set(3, 3) // {1=1, 3=3}
console.info(lruCache.get(2)) // null
lruCache.set(4, 4) // {3=3, 4=4}
console.info(lruCache.get(1)) // null
console.info(lruCache.get(3)) // 3 {4=4, 3=3}
console.info(lruCache.get(4)) // 4 {3=3, 4=4}
LRU实现
class LRUCache {
constructor(length) {
this.length = length; // 存储长度
this.data = new Map(); // 存储数据
}
// 存储数据，通过键值对的方式
set(key, value) {
const data = this.data;
// 有的话 删除 重建放到map最前面
if (data.has(key)) {
data.delete(key)
}
data.set(key, value);
// 如果超出了容量，则需要删除最久的数据
if (data.size > this.length) {
// 删除map最老的数据
const delKey = data.keys().next().value;
data.delete(delKey);
}
}
// 获取数据
get(key) {
const data = this.data;
// 未找到
if (!data.has(key)) {
return null;
}
const value = data.get(key); // 获取元素
data.delete(key); // 删除元素
data.set(key, value); // 重新插入元素到map最前面
return value // 返回获取的值
}
}
