2022/06/29 LRU缓存-keep-alive实现原理

前言

相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 keep-alive  这个内置组件。<br />    那么什么是 keep-alive 呢？<br />    keep-alive 是 Vue.js 的一个 内置组件。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实 DOM 中，也不会出现在父组件链中。简单的说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提升系统性能。 keep-alive 的 max 属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉，而这里所运用到的缓存机制就是 **LRU 算法**

LRU 缓存淘汰算法

LRU（ least recently used）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据
LRU的主体思想在于：如果数据最近被访问过,那么将来被访问的几率也更高

1. 新数据插入到链表尾部；
2. 每当缓存命中（即缓存数据被访问），则将数据移到链表尾部
3. 当链表满的时候，将链表头部的数据丢弃。

   实现LRU的数据结构

   经典的 LRU 一般都使用 hashMap + 双向链表。考虑可能需要频繁删除一个元素，并将这个元素的前一个节点指向下一个节点，所以使用双链接最合适。并且它是按照结点最近被使用的时间顺序来存储的。 如果一个结点被访问了， 我们有理由相信它在接下来的一段时间被访问的概率要大于其它结点。
   
   不过既然已经在 js 里都已经使用 Map 了，何不直接取用现成的迭代器获取下一个结点的 key 值（keys().next()）