場(chǎng)景介紹

項(xiàng)目中經(jīng)常會(huì)有這么一個(gè)需求，一個(gè)表單頁(yè)面，可能需要跳轉(zhuǎn)其他頁(yè)面拿到對(duì)應(yīng)的數(shù)據(jù)，再跳回表單頁(yè)面，但是之前填寫過(guò)的數(shù)據(jù)還在。而某些頁(yè)面跳這個(gè)表單頁(yè)面的時(shí)候，是不需要緩存，因?yàn)樗切略?，如果是緩存的話，那么上次填的?shù)據(jù)，下次進(jìn)入這個(gè)表單頁(yè)面的時(shí)候，那么數(shù)據(jù)還存在，明顯不符合設(shè)計(jì)的要求。

需求分析

因?yàn)轫?xiàng)目中使用的是 vue3，所以對(duì)于頁(yè)面緩存，第一時(shí)間想到就是利用 keepAlive 做緩存，但是如果不做其他處理的話，僅僅簡(jiǎn)單使用 keepAlive 會(huì)帶來(lái)一些問(wèn)題，就像上面說(shuō)的，如果上次填的數(shù)據(jù)，回退到上一個(gè)頁(yè)面，再進(jìn)來(lái)表單頁(yè)，那么上次填的數(shù)據(jù)還存在，那么，我們?cè)撛趺慈デ宓艟彺?，什么時(shí)候又加入緩存呢，而且清緩存和加入緩存的時(shí)機(jī)，我們又怎么把握呢，這就是我們需要解決的難題。

1. 動(dòng)態(tài) include 數(shù)組

一開(kāi)始，我想到的是，維護(hù) keepAlive 的 include 數(shù)組，這個(gè)數(shù)組我使用的是 set 數(shù)據(jù)結(jié)構(gòu)，因?yàn)橛斜容^方便的增刪方法，而且不重復(fù)，代碼如下：

// useCache.ts
import { ref } from "vue";

const KEEP_ALIVE_SET = ref(new Set([]));

export default () => {
  const setKeepAlive = <T extends "add" | "delete">(
    operate: T,
    value: number
  ) => {
    KEEP_ALIVE_SET.value[operate](value);
  };

  return {
    KEEP_ALIVE_SET,
    setKeepAlive
  };
};

<!-- App.vue -->
<template>
  <router-view v-slot="{ Component }">
    <transition name="router-fade" mode="out-in">
      <keep-alive :include="Array.from(KEEP_ALIVE_SET)">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

關(guān)于這里 setKeepAlive 的時(shí)機(jī)的心智負(fù)擔(dān)著實(shí)有點(diǎn)大，因?yàn)?add 的時(shí)候，存在著大量的頁(yè)面進(jìn)行 add，即使用了路由守衛(wèi)去設(shè)置，邏輯的編寫也充斥著代碼本身，隨著頁(yè)面變多，這心智負(fù)擔(dān)也會(huì)呈現(xiàn)直線增長(zhǎng)，并且這還會(huì)有一個(gè) bug，當(dāng) add 緩存的時(shí)候，首次進(jìn)入緩存頁(yè)面，其實(shí)他還沒(méi)緩存下來(lái)，我們都知道 keepAlive 執(zhí)行緩存，需要首次進(jìn)入頁(yè)面的時(shí)候記錄下來(lái)，之后再進(jìn)入的時(shí)候，判斷該頁(yè)面是否已經(jīng)加載過(guò)，就不執(zhí)行重新渲染，也就造成了，緩存能生效是在第二次進(jìn)入這個(gè)頁(yè)面的時(shí)候，這明顯與我們的預(yù)想不符合，所以該方案也就 pass 掉了。

2. 時(shí)間戳 key

我們回顧下關(guān)于在 vue 中的 key 屬性：

key 這個(gè)特殊的 attribute 主要作為 Vue 的虛擬 DOM 算法提示，在比較新舊節(jié)點(diǎn)列表時(shí)用于識(shí)別 vnode。如果 key 相同，會(huì)最小化觸發(fā)重新渲染（達(dá)到緩存的目的），如果 key 不同，那么肯定會(huì)發(fā)生替換。

主要代碼

// useCache.ts
import { ref } from "vue";

const kEEP_ALIVE_MAP = ref(new Map([]));

export default () => {
  const setKeepAlive = (key: string, value: number) => {
    kEEP_ALIVE_MAP.value.set(key, value);
  };

  return {
    kEEP_ALIVE_MAP,
    setKeepAlive
  };
};

<!-- App.vue -->
<template>
  <!-- 利用緩存的時(shí)間戳key 保證頁(yè)面保鮮 -->
  <router-view v-slot="{ Component }">
    <keep-alive :max="5">
      <component
        :is="Component"
        v-if="$route.meta.keepAlive"
        :key="$route.meta.keepAlive ? kEEP_ALIVE_MAP.get($route.name) : $route.path"
      />
    </keep-alive>

    <component
      :is="Component"
      v-if="!$route.meta.keepAlive"
      :key="$route.name"
    />
  </router-view>
</template>

a 頁(yè)面去到表單頁(yè)，不需要緩存：

const goAddOrdersPage = () => {
  // 設(shè)置時(shí)間戳key 保證每次從這個(gè)頁(yè)面跳轉(zhuǎn)，key都是最新的，進(jìn)入表單頁(yè)也就一直重新渲染
  setKeepAlive("AddOrder", new Date().getTime());
  router.push({
    name: "AddOrder"
  });
};

b 頁(yè)面操作完成后，回到表單頁(yè)面，需要緩存：

// 路由導(dǎo)航守衛(wèi)
onBeforeRouteLeave((to, from, next) => {
  // 如果不是去的表單頁(yè)面，那么就重新更新表單頁(yè)面的key，否則的話，就直接next，這樣就可以在表單頁(yè)面用到的key還是舊的時(shí)間戳key，以此達(dá)到緩存目的
  if (to.name !== "AddOrder") {
    setKeepAlive("AddOrder", new Date().getTime());
  }
  next();
});

總結(jié)

在維護(hù)該 key 的時(shí)候，我使用的是一個(gè)全局變量維護(hù)，利用 hooks 的形式，在各個(gè)頁(yè)面之間進(jìn)行設(shè)置，當(dāng)然這只是比較簡(jiǎn)單的一種處理方法，其實(shí)方法有很多，也可以用狀態(tài)管理器 vuex 或 pinia。注意：如果用路由 params 進(jìn)行傳值，vue-router 會(huì)給出警告，目前這個(gè)方案是官方也不建議的，而且我自己也試過(guò)，params 會(huì)獲取不到值。

到此這篇關(guān)于vue3利用keepAlive緩存頁(yè)面的文章就介紹到這了,更多相關(guān)vue3用keepAlive緩存頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論