Vue 项目中 KeepAlive 缓存失败原因排查

原因

公司项目页面中，使用 KeepAlive 缓存页面总失效，但是开发环境正常。

查来查去查不到原因，后来发现测试环境和开发环境除了设置不一样，然后代码不一样也导致了排查原因困难。

排查

经过排查我发现，页面从未缓存的页面（A）跳转到已缓存的页面（B），已缓存的页面（B）缓存失效。

在开发环境中因为管理员没有修改相关设置，所以我这边开发环境中页面的跳转相当于已缓存的页面（B）跳转到了已缓存页面（B）所以缓存正常。

但是在测试环境中，管理员修改了相关设置，所以测试环境中页面的跳转相当于未缓存的页面（A）跳转到了已缓存页面（B），所以缓存失效。

如果测试环境中从已缓存的页面（B）跳转到未缓存的页面（A），那么缓存正常。

代码的不合理

这个项目有个秀儿把 v-if="!route.meta.noCache" 写在了 keep-alive 外面，所以缓存失效。

我个人理解 keep-alive 的作用就是用来缓存的，它用v-if相当于销毁了 keep-alive ，所以缓存失效。

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition :enter-active-class="animante" mode="out-in">
        <div>
          <keep-alive :include="tagsViewStore.cachedViews" v-if="!route.meta.noCache">
            <component v-if="!route.meta.link" :is="Component" :key="route.path" />
          </keep-alive>
          <component v-if="!route.meta.link && route.meta.noCache" :is="Component" :key="route.path" />
        </div>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

解决方案

正常写，不要在 keep-alive 写 v-if 。

<keep-alive :include="tagsViewStore.cachedViews">
  <component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive>