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