Vue3 除了 keep-alive，還有哪些頁面緩存的實現方案

来源:https://www.cnblogs.com/houxianzhou/p/18174435
-Advertisement-
Play Games

引言 有這麼一個需求：列表頁進入詳情頁後，切換回列表頁，需要對列表頁進行緩存，如果從首頁進入列表頁，就要重新載入列表頁。 對於這個需求，我的第一個想法就是使用keep-alive來緩存列表頁，列表和詳情頁切換時，列表頁會被緩存；從首頁進入列表頁時，就重置列表頁數據並重新獲取新數據來達到列表頁重新載入 ...


引言

有這麼一個需求：列表頁進入詳情頁後，切換回列表頁，需要對列表頁進行緩存，如果從首頁進入列表頁，就要重新載入列表頁。

對於這個需求，我的第一個想法就是使用keep-alive來緩存列表頁，列表和詳情頁切換時，列表頁會被緩存；從首頁進入列表頁時，就重置列表頁數據並重新獲取新數據來達到列表頁重新載入的效果。

但是，這個方案有個很不好的地方就是：如果列表頁足夠複雜，有下拉刷新、下拉載入、有彈窗、有輪播等，在清除緩存時，就需要重置很多數據和狀態，而且還可能要手動去銷毀和重新載入某些組件，這樣做既增加了複雜度，也容易出bug。

接下來說說我的想到的新實現方案（代碼基於Vue3）。

keep-alive 緩存和清除

keep-alive 緩存原理：進入頁面時，頁面組件渲染完成，keep-alive 會緩存頁面組件的實例；離開頁面後，組件實例由於已經緩存就不會進行銷毀；當再次進入頁面時，就會將緩存的組件實例拿出來渲染，因為組件實例保存著原來頁面的數據和Dom的狀態，那麼直接渲染組件實例就能得到原來的頁面。

keep-alive 最大的難題就是緩存的清理，如果能有簡單的緩存清理方法，那麼keep-alive 組件用起來就很爽。

但是，keep-alive 組件沒有提供清除緩存的API，那有沒有其他清除緩存的辦法呢？答案是有的。我們先看看 keep-alive 組件的props：

include - string | RegExp | Array。只有名稱匹配的組件會被緩存。
exclude - string | RegExp | Array。任何名稱匹配的組件都不會被緩存。
max - number | string。最多可以緩存多少組件實例。

從include描述來看，我發現include是可以用來清除緩存，做法是：將組件名稱添加到include里，組件會被緩存；移除組件名稱，組件緩存會被清除。根據這個原理，用hook簡單封裝一下代碼：

import { ref, nextTick } from 'vue'

const caches = ref<string[]>([])

export default function useRouteCache () {
  // 添加緩存的路由組件
  function addCache (componentName: string | string []) {
    if (Array.isArray(componentName)) {
      componentName.forEach(addCache)
      return
    }
    
    if (!componentName || caches.value.includes(componentName)) return

    caches.value.push(componentName)
  }

  // 移除緩存的路由組件
  function removeCache (componentName: string) {
    const index = caches.value.indexOf(componentName)
    if (index > -1) {
      return caches.value.splice(index, 1)
    }
  }
  
  // 移除緩存的路由組件的實例
  async function removeCacheEntry (componentName: string) {    
    if (removeCache(componentName)) {
      await nextTick()
      addCache(componentName)
    }
  }
  
  return {
    caches,
    addCache,
    removeCache,
    removeCacheEntry
  }
}

hook的用法如下：

<router-view v-slot="{ Component }">
  <keep-alive :include="caches">
    <component :is="Component" />
  </keep-alive>
</router-view>

<script setup lang="ts">
import useRouteCache from './hooks/useRouteCache'
const { caches, addCache } = useRouteCache()

<!-- 將列表頁組件名稱添加到需要緩存名單中 -->
addCache(['List'])
</script>

清除列表頁緩存如下：

import useRouteCache from '@/hooks/useRouteCache'

const { removeCacheEntry } = useRouteCache()
removeCacheEntry('List')

此處removeCacheEntry方法清除的是列表組件的實例，'List' 值仍然在 組件的include里，下次重新進入列表頁會重新載入列表組件，並且之後會繼續列表組件進行緩存。

列表頁清除緩存的時機

進入列表頁後清除緩存

在列表頁路由組件的beforeRouteEnter勾子中判斷是否是從其他頁面（Home）進入的，是則清除緩存，不是則使用緩存。

defineOptions({
  name: 'List1',
  beforeRouteEnter (to: RouteRecordNormalized, from: RouteRecordNormalized) {
    if (from.name === 'Home') {
      const { removeCacheEntry } = useRouteCache()
      removeCacheEntry('List1')
    }
  }
})

這種緩存方式有個不太友好的地方：當從首頁進入列表頁，列表頁和詳情頁來回切換，列表頁是緩存的；但是在首頁和列表頁間用瀏覽器的前進後退來切換時，我們更多的是希望列表頁能保留緩存，就像在多頁面中瀏覽器前進後退會緩存原頁面一樣的效果。但實際上，列表頁重新刷新了，這就需要使用另一種解決辦法，點擊鏈接時清除緩存清除緩存。

點擊鏈接跳轉前清除緩存

在首頁點擊跳轉列表頁前，在點擊事件的時候去清除列表頁緩存，這樣的話在首頁和列表頁用瀏覽器的前進後退來回切換，列表頁都是緩存狀態，只要當重新點擊跳轉鏈接的時候，才重新載入列表頁，滿足預期。

// 首頁 Home.vue

<li>
  <router-link to="/list" @click="removeCacheBeforeEnter">列表頁</router-link>
</li>


<script setup lang="ts">
import useRouteCache from '@/hooks/useRouteCache'

defineOptions({
  name: 'Home'
})

const { removeCacheEntry } = useRouteCache()

// 進入頁面前，先清除緩存實例
function removeCacheBeforeEnter () {
  removeCacheEntry('List')
}
</script>

狀態管理實現緩存

通過狀態管理庫存儲頁面的狀態和數據也能實現頁面緩存。此處狀態管理使用的是pinia。

首先使用pinia創建列表頁store：

import { defineStore } from 'pinia'

interface Item {
  id?: number,
  content?: string
}

const useListStore = defineStore('list', {
  // 推薦使用 完整類型推斷的箭頭函數
  state: () => {
    return {
      isRefresh: true,
      pageSize: 30,
      currentPage: 1,
      list: [] as Item[],
      curRow: null as Item | null
    }
  },
  actions: {
    setList (data: Item []) {
      this.list = data
    },
    setCurRow (data: Item) {
      this.curRow = data
    },
    setIsRefresh (data: boolean) {
      this.isRefresh = data
    }
  }
})

export default useListStore

然後在列表頁中使用store：

<div>
  <el-page-header @back="goBack">
    <template #content>狀態管理實現列表頁緩存</template>
  </el-page-header>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%; margin-top: 30px;">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="content" label="內容"/>
    <el-table-column label="操作">
      <template v-slot="{ row }">
        <el-link type="primary" @click="gotoDetail(row)">進入詳情</el-link>
        <el-tag type="success" v-if="row.id === listStore.curRow?.id">剛點擊</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="listStore.currentPage"
    :page-size="listStore.pageSize"
    layout="total, prev, pager, next"
    :total="listStore.list.length"
  />
</div>
  
<script setup lang="ts">
import useListStore from '@/store/listStore'
const listStore = useListStore()

...
</script>

通過beforeRouteEnter鉤子判斷是否從首頁進來，是則通過 listStore.$reset() 來重置數據，否則使用緩存的數據狀態；之後根據 listStore.isRefresh 標示判斷是否重新獲取列表數據。

defineOptions({
  beforeRouteEnter (to: RouteLocationNormalized, from: RouteLocationNormalized) {
    if (from.name === 'Home') {
      const listStore = useListStore()
      listStore.$reset()
    }
  }
})

onBeforeMount(() => {
  if (!listStore.useCache) {
    loading.value = true
    setTimeout(() => {
      listStore.setList(getData())
      loading.value = false
    }, 1000)
    listStore.useCache = true
  }
})

缺點

通過狀態管理去做緩存的話，需要將狀態數據都存在stroe里，狀態多起來的話，會有點繁瑣，而且狀態寫在store里肯定沒有寫在列表組件里來的直觀；狀態管理由於只做列表頁數據的緩存，對於一些非受控組件來說，組件內部狀態改變是緩存不了的，這就導致頁面渲染後跟原來有差別，需要額外代碼操作。

頁面彈窗實現緩存

將詳情頁做成全屏彈窗，那麼從列表頁進入詳情頁，就只是簡單地打開詳情頁彈窗，將列表頁覆蓋，從而達到列表頁 “緩存”的效果，而非真正的緩存。

這裡還有一個問題，打開詳情頁之後，如果點後退，會返回到首頁，實際上我們希望是返回列表頁，這就需要給詳情彈窗加個歷史記錄，如列表頁地址為 '/list'，打開詳情頁變為 '/list?id=1'。

彈窗組件實現：

// PopupPage.vue

<template>
  <div class="popup-page" :class="[!dialogVisible && 'hidden']">
    <slot v-if="dialogVisible"></slot>
  </div>
</template>

<script setup lang="ts">
import { useLockscreen } from 'element-plus'
import { computed, defineProps, defineEmits } from 'vue'
import useHistoryPopup from './useHistoryPopup'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 路由記錄
  history: {
    type: Object
  },
  // 配置了history後，初次渲染時，如果有url上有history參數，則自動打開彈窗
  auto: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: '50%'
  },
  full: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(
  ['update:modelValue', 'autoOpen', 'autoClose']
)

const dialogVisible = computed<boolean>({ // 控制彈窗顯示
  get () {
    return props.modelValue
  },
  set (val) {
    emit('update:modelValue', val)
  }
})

useLockscreen(dialogVisible)

useHistoryPopup({
  history: computed(() => props.history),
  auto: props.auto,
  dialogVisible: dialogVisible,
  onAutoOpen: () => emit('autoOpen'),
  onAutoClose: () => emit('autoClose')
})
</script>

<style lang='less'>
.popup-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  overflow: auto;
  padding: 10px;
  background: #fff;
  
  &.hidden {
    display: none;
  }
}
</style>

彈窗組件調用：

<popup-page 
  v-model="visible" 
  full
  :history="{ id: id }">
  <Detail></Detail>
</popup-page>

hook：useHistoryPopup 參考文章：https://juejin.cn/post/7139941749174042660

缺點

彈窗實現頁面緩存，局限比較大，只能在列表頁和詳情頁中才有效，離開列表頁之後，緩存就會失效，比較合適一些簡單緩存的場景。

父子路由實現緩存

該方案原理其實就是頁面彈窗，列表頁為父路由，詳情頁為子路由，從列表頁跳轉到詳情頁時，顯示詳情頁字路由，且詳情頁全屏顯示，覆蓋住列表頁。

聲明父子路由：

{
  path: '/list',
  name: 'list',
  component: () => import('./views/List.vue'),
  children: [
    {
      path: '/detail',
      name: 'detail',
      component: () => import('./views/Detail.vue'),
    }
  ]
}

列表頁代碼：

// 列表頁
<template>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%; margin-top: 30px;">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="content" label="內容"/>
    <el-table-column label="操作">
      <template v-slot="{ row }">
        <el-link type="primary" @click="gotoDetail(row)">進入詳情</el-link>
        <el-tag type="success" v-if="row.id === curRow?.id">剛點擊</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="currentPage"
    :page-size="pageSize"
    layout="total, prev, pager, next"
    :total="list.length"
  />
  
  <!-- 詳情頁 -->
  <router-view class="popyp-page"></router-view>
</template>

<style lang='less' scoped>
.popyp-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  overflow: auto;
}
</style>

本文來自博客園，作者：喆星高照，轉載請註明原文鏈接：https://www.cnblogs.com/houxianzhou/p/18174435


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2024高頻前端面試題合集(一)
    1、請簡述Js Bridge JavaScript Bridge 是一種技術，用於在不同的編程語言或環境中傳遞數據和調用函數。在 Web 開發中，JavaScript Bridge 通常指在 JavaScript 和其他語言（如 Java、Objective-C、Swift 等）之間建立通信的機制。 ...
  • 【動畫進階】極具創意的滑鼠交互動畫
    最近，群里在討論這麼一個有趣的交互效果，來源於：vueflow.dev： 通過審查元素，發現原效果藉助了 Canvas 實現。 思索了一番，覺得這個效果利用 CSS 配合部分 Javascript 代碼完全也是可以做到的。 於是動手嘗試了一番，最終完美的復刻了該效果： 過程中還是有非常多有意思的技巧 ...
  • 深入探索JavaScript中的structuredClone：現代深拷貝的解密指南
    在 JavaScript 中，實現深拷貝的方式有很多種，每種方式都有其優點和缺點。今天介紹一種原生 JavaScript 提供的structuredClone實現深拷貝。 下麵列舉一些常見的方式，以及它們的代碼示例和優缺點： 1. 使用 JSON.parse(JSON.stringify(obj)) ...
  • XML Schema（XSD）詳解：定義 XML 文檔結構合法性的完整指南
    XML Schema描述了 XML 文檔的結構。XML Schema語言也稱為 XML Schema Definition（XSD）。 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs: ...
  • thymeleaf
    1、通過${}來獲取model中的變數，註意這不是el表達式，而是ognl表達式，但是語法非常像 <h2 th:object="${user}"> <p>Name: <span th:text="*{name}">Jack</span>.</p> <p>Age: <span th:text="*{a ...
  • 一款摸魚神器！幫助你利用上班時間背單詞！
    Qwerty Learner —— 一款為鍵盤工作者設計的單詞記憶與英語肌肉記憶鍛煉軟體，主要服務於以英語作為主要工作語言的鍵盤工作者。 ...
  • 頁面嵌套，界面套娃，除了用iframe，還有其他方式嗎？
    ​ UIOTOS可以瞭解下，uiotos.net，通過連線來代替腳本邏輯開發，複雜的交互界面，通過頁面嵌套輕鬆解決，是個很新穎的思路，前端零代碼！ 藍圖連線尤其是獨創的頁面嵌套和屬性繼承技術，好家伙相當於把vue的組件化、增量式面向對象開發，直接搬到前端拖拽工具上，無代碼編程了。 總的來說，這上面的 ...
  • 如何判斷一個js對象是否存在迴圈引用
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、背景 在前端JSON.stringfy是我們常用的一個方法，可以將一個對象序列化。 例如將如下對象序列化 const person = { name: 'kalory', age:18} JSON.stringfy(person) / ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類