LRU（Least Recently Used）

本文介绍: 在Vue.js中，组件使用了算法来缓存组件。LRU算法是一种缓存淘汰策略，它根据最近使用的时间来确定哪些数据被保留在缓存中。组件是Vue.js提供的一个抽象组件，用于在多次切换组件时缓存组件实例，以提高性能。它会缓存那些频繁使用的组件实例，并在需要时将其保持在内存中。当组件不再需要时，LRU算法就会决定是否将其从缓存中移除，以释放内存空间。Vue.js使用LRU算法来管理组件缓存的组件实例。当缓存容量达到设定的上限时，会根据最近使用的时间选择最不常用的组件实例进行淘汰。

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