【VUE】keep-alive实现原理

[Dliling]

LRU（Least recently used）缓存淘汰算法
根据数据的历史访问记录来进行淘汰数据，核心思想是：如果数据最近被访问过，那么将来被访问过的几率也更高。
将历史记录放入一个队列（先进先出）中，当数量超过Max时，删除第一个元素【0】。

原理

1. 获取keep-alive包裹着的第一个子组件对象及其组件名。
2. 根据设定的include/exclude（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例。
3. 根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存改过该组件实例。如果存在，直接取出缓存值，并更新该Key在this.keys中的位置。
4. 在this.cache对象中存储该组件实例并保存Key值，之后检查缓存的实例数量是否超过Max，超过则根据LRU置换策略删除最近最久未使用的实例。
5. 最后组件实例的keepAlive设置为true，这个在渲染和执行被包裹组件的钩子函数会用到。

使用

<keep-alive>
     <component :is="view"></component>
</keep-alive>

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件中。
当组件在keep-alive内被切换，它的actived和deactived这两个生命周期钩子函数会被对应执行。进入页面和离开时执行地钩子函数如下：
第一次进入页面时：created -> mounted -> actived
第一次离开页面时：不再执行beforeDestroy和destroyed，而是执行deactived
再次进入页面时：actived

所以挂载事件时需要注意，只需要执行一次的放在mounted中，组件每次进入都需要执行的放在actived。

推荐：
彻底揭秘keep-alive