在 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 // 返回获取的值}
}