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,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高 ”。所以新数据会加入尾部,被访问数据也会加入尾部,最终越往头部被访问几率越低。

Keepalived 是不是探针 keepalive 原理_数组

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中前进刷新、后退缓存用户浏览数据和浏览位置的实践参考