完整项目地址：vue3-element-plus
体验地址：http://8.135.1.141/vue3-admin-plus
系列文章入口：
前言
当我们在某些特定场景中需要缓存某个页面，此时就需要用到我们所需要讲的keep-alive，本篇主要讲解架构中keep-alive的原理和使用
架构keep-alive核心源码分析
src/layout/components/AppMain.vue
<transition v-if="settings.mainNeedAnimation" mode="out-in" name="fade-transform">
<!-通过keep-alive的include属性，根据组件的name进行缓存，如KeepAlive ->
<keep-alive :include="cachedViews">
<component :is="Component" :key="key" />
</keep-alive>
</transition>
<script>
//通过vuex里的cachedViews控制需要缓存的页面
//cachedViews: Array<string>
const cachedViews = computed(() => {
return store.state.app.cachedViews
})
// cachePage: true ->页面初始化后缓存本页面
// leaveRmCachePage: true -> 页面离开后或者关闭后， 移除本页面缓存
// leaveRmCachePage和cachePage来自于router里的配置，请看下面介绍
let oldRoute = null
//代码原理：通过计算属性监听，当router.path变化是触发get函数调用。从而获取当前路由，根据路由配置信息里的cachePage和leaveRmCachePage决定是否需要缓存和移除缓存
const key = computed({
get() {
//页面离开时，如果有cachePage=true和leaveRmCachePage=true，则移除缓存
if (oldRoute?.name) {
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
store.commit('app/M_DEL_CACHED_VIEW', oldRoute.name)
}
}
//页面进入时如果有cachePage=true，则设置缓存
if (route.name) {
if (route.meta?.cachePage) {
store.commit('app/M_ADD_CACHED_VIEW', route.name)
}
}
//保存上一个路由信息（也就是当前页面的路由信息）
oldRoute = JSON.parse(JSON.stringify({ name: route.name, meta: route.meta }))
return route.path
}
})
</script>
如何使用
src/router/index.js
{
path: 'keep-alive',
component: () => import('@/views/example/keep-alive'),
name: 'KeepAlive',
//如果配置了cachePage: true 则当前页面进入后，进行缓存。 默认是false
//若果配置了leaveRmCachePage：true 则当前页离开后，页面会被移除缓存。默认是false
meta: { title: 'Keep-Alive', cachePage: true, leaveRmCachePage: false }
},
{
path: 'router-demo-f',
name: 'routerDemoF',
hidden: true,
component: () => import('@/views/example/keep-alive/RouterDemoF.vue'),
meta: { title: 'RouterDemo-F', cachePage: true, activeMenu: '/writing-demo/keep-alive' }
},
{
path: 'router-demo-s',
name: 'routerDemoS',
hidden: true,
component: () => import('@/views/example/keep-alive/RouterDemoS.vue'),
meta: { title: 'RouterDemo-S', cachePage: true, activeMenu: '/writing-demo/keep-alive' }
}
在meta里设置cachePage或者leaveRmCachePage，决定是否需要缓存和移除缓存
各种组合情况
cachePage: true, leaveRmCachePage: true ->页面进入时缓存，离开时移除缓存
cachePage: false 或者不写 ->页面不缓存，按正常的页面走
cachePage: true, leaveRmCachePage: false -> 页面进入时缓存，离开时不移除缓存。那么此页面缓存会一直存在，除非手动移除
如果进行多级缓存呢
有时我们会有这种业务场景
1644546522483
从A页面跳到B页面在到C页面，此时需要A,B,C页面都需要缓存。保存A,B,C页面的状态，如A页面的列表搜索条件等。但是如果跳出A,B,C页面时需要同时清空A,B,C页面的缓存，如：
1644546982434
实现原理
1644546489961
核心代码
src/views/example/keep-alive/KeepAlive.vue
const $route = useRoute()
const $store = useStore()
// cacheGroup为缓存分组 KeepAlive->routerDemoF->routerDemoS
let cacheGroup = ['KeepAlive', 'routerDemoF', 'routerDemoS']
const unWatch = watch(
() => $route.name,
() => {
//如果进入的页面路由name没有在cacheGroup中，则清空这个cacheGroup配置的页面缓存
if (!cacheGroup.includes($route.name)) {
//sleep(300) -> 等进入其他页面后在进行页面缓存清空， 用于页面性能优化
useCommon()
.sleep(300)
.then(() => {
//遍历cacheGroup清空页面缓存
cacheGroup.forEach((fItem) => $store.commit('app/M_DEL_CACHED_VIEW', fItem))
})
//remove watch
unWatch()
}
},
//deep: true
//immediate进入页面立即监听
{ immediate: true }
)
注：缓存和tab没有关联，和路由配置有关联
架构为什么要这样设置呢？
1.缓存和tab没有关联，更利于缓存的灵活配置。如：当我们在settings.js中设置showTagsView为false时，依然可以使用路由配置的cachePage或者leaveRmCachePage进行设置缓存，TagsView的显示和隐藏对缓存没有影响。
2.和路由配置有关联，更利于我们对缓存的使用。如，我们可以根据路由配置的cachePage或者leaveRmCachePage，实现进行页面是否缓存，和离开页面页面是否移除缓存的组合式选择。
1644548683277
那么如果我想实现之前tab打开时，页面缓存，tab关闭时，移除缓存的功能呢？
在想实现此功能页面的路由上设置
//如果配置了cachePage: true 则当前页面进入后，进行缓存。 默认是false
//若果配置了leaveRmCachePage：true 则当前页离开后，页面会被移除缓存。默认是false
meta: { title: 'Keep-Alive', cachePage: true, leaveRmCachePage: ture }
cachePage: true, leaveRmCachePage: ture -> 进入时缓存，关闭时移除缓存
网友评论