vue keep-alive缓存原理

keep-alive的原理：
在内部维护了一个keys数组和一个cache缓存对象。keys数组会记录缓存组件的key值，若没有指定key值就会自动生成一个唯一的key值。cache对象会以key值为键，vnode为值，然后缓存组件对应的虚拟 DOM。在keep-alive 渲染阶段会拿key值到cache对象中去找是否有值，如果有就从缓存中取 vnode 的组件实例，如果没有则进行缓存。当缓存数量超过max设置数值时keep-alive会删掉key数组中的第一个元素，并重新调整该组件key的顺序。

为什么要删除第一个缓存组件并且为什么命中缓存了还要调整组件key的顺序？
因为应用了一个缓存淘汰策略LRU。LRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高 ”。所以新数据会加入尾部，被访问数据也会加入尾部，最终越往头部被访问几率越低。

keep-alive的生命周期：
初次进入时：created > mounted > activated；退出后触发 deactivated
再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

keep-alive的属性：
include是要缓存的组件；exclude是不缓存的组件；max是最多缓存几个。

keep-alive的应用场景：
商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
订单列表跳转到订单详情，返回，等等场景

keep-alive的代码段：

// 方法一：在路由meta源信息中的keepAlive或者其他名字的字段来判断当前路由组件是否需要缓存
<keep-alive>      
    <router-view v-if="$route.meta.keepAlive"/>    
</keep-alive>    
<router-view v-if="!$route.meta.keepAlive"/>
 
// 方法二：通过include或者exclude 来判断当前路由组件是否需要缓存
// 利用include实现，匹配到组件中定义的name，将进行缓存
<keep-alive include='home'>      
    <router-view />    
</keep-alive>

//路由设置
{      
    path: '/home',  
    name: 'home',  
    component: () => import ('@/pages/index'),    
    meta: {
        title: '主列表页',        
        keepAlive: true  // 通过此字段判断是否需要缓存当前组件  
    }    
},

vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
参考