vue3利用keepAlive快取頁面範例詳解

2022-11-27 14:00:50

場景介紹

專案中經常會有這麼一個需求，一個表單頁面，可能需要跳轉其他頁面拿到對應的資料，再跳回表單頁面，但是之前填寫過的資料還在。而某些頁面跳這個表單頁面的時候，是不需要快取，因為他是新增，如果是快取的話，那麼上次填的資料，下次進入這個表單頁面的時候，那麼資料還存在，明顯不符合設計的要求。

需求分析

因為專案中使用的是 vue3，所以對於頁面快取，第一時間想到就是利用 keepAlive 做快取，但是如果不做其他處理的話，僅僅簡單使用 keepAlive 會帶來一些問題，就像上面說的，如果上次填的資料，回退到上一個頁面，再進來表單頁，那麼上次填的資料還存在，那麼，我們該怎麼去清掉快取，什麼時候又加入快取呢，而且清快取和加入快取的時機，我們又怎麼把握呢，這就是我們需要解決的難題。

1. 動態 include 陣列

一開始，我想到的是，維護 keepAlive 的 include 陣列，這個陣列我使用的是 set 資料結構，因為有比較方便的增刪方法，而且不重複，程式碼如下：

// 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>

關於這裡 setKeepAlive 的時機的心智負擔著實有點大，因為 add 的時候，存在著大量的頁面進行 add，即使用了路由守衛去設定，邏輯的編寫也充斥著程式碼本身，隨著頁面變多，這心智負擔也會呈現直線增長，並且這還會有一個 bug，當 add 快取的時候，首次進入快取頁面，其實他還沒快取下來，我們都知道 keepAlive 執行快取，需要首次進入頁面的時候記錄下來，之後再進入的時候，判斷該頁面是否已經載入過，就不執行重新渲染，也就造成了，快取能生效是在第二次進入這個頁面的時候，這明顯與我們的預想不符合，所以該方案也就 pass 掉了。

2. 時間戳 key

我們回顧下關於在 vue 中的 key 屬性：

key 這個特殊的 attribute 主要作為 Vue 的虛擬 DOM 演演算法提示，在比較新舊節點列表時用於識別 vnode。如果 key 相同，會最小化觸發重新渲染（達到快取的目的），如果 key 不同，那麼肯定會發生替換。

主要程式碼

// 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>
  <!-- 利用快取的時間戳key 保證頁面保鮮 -->
  <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 頁面去到表單頁，不需要快取：

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

b 頁面操作完成後，回到表單頁面，需要快取：

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

總結

在維護該 key 的時候，我使用的是一個全域性變數維護，利用 hooks 的形式，在各個頁面之間進行設定，當然這只是比較簡單的一種處理方法，其實方法有很多，也可以用狀態管理器 vuex 或 pinia。注意：如果用路由 params 進行傳值，vue-router 會給出警告，目前這個方案是官方也不建議的，而且我自己也試過，params 會獲取不到值。

到此這篇關於vue3利用keepAlive快取頁面的文章就介紹到這了,更多相關vue3用keepAlive快取頁面內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！