keep-alive缓存篇(进阶篇)

完整项目地址：vue3-element-plus

体验地址：http://8.135.1.141/vue3-admin-plus

系列文章入口：

真香定律！带你用vue3+vite2撸后台（入口）

前言

当我们在某些特定场景中需要缓存某个页面，此时就需要用到我们所需要讲的keep-alive，本篇主要讲解架构中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 -> 进入时缓存，关闭时移除缓存