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
更多相關文章
  • 1、請簡述Js Bridge JavaScript Bridge 是一種技術,用於在不同的編程語言或環境中傳遞數據和調用函數。在 Web 開發中,JavaScript Bridge 通常指在 JavaScript 和其他語言(如 Java、Objective-C、Swift 等)之間建立通信的機制。 ...
  • 最近,群里在討論這麼一個有趣的交互效果,來源於:vueflow.dev: 通過審查元素,發現原效果藉助了 Canvas 實現。 思索了一番,覺得這個效果利用 CSS 配合部分 Javascript 代碼完全也是可以做到的。 於是動手嘗試了一番,最終完美的復刻了該效果: 過程中還是有非常多有意思的技巧 ...
  • 在 JavaScript 中,實現深拷貝的方式有很多種,每種方式都有其優點和缺點。今天介紹一種原生 JavaScript 提供的structuredClone實現深拷貝。 下麵列舉一些常見的方式,以及它們的代碼示例和優缺點: 1. 使用 JSON.parse(JSON.stringify(obj)) ...
  • XML Schema描述了 XML 文檔的結構。XML Schema語言也稱為 XML Schema Definition(XSD)。 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs: ...
  • 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 —— 一款為鍵盤工作者設計的單詞記憶與英語肌肉記憶鍛煉軟體,主要服務於以英語作為主要工作語言的鍵盤工作者。 ...
  • ​ UIOTOS可以瞭解下,uiotos.net,通過連線來代替腳本邏輯開發,複雜的交互界面,通過頁面嵌套輕鬆解決,是個很新穎的思路,前端零代碼! 藍圖連線尤其是獨創的頁面嵌套和屬性繼承技術,好家伙相當於把vue的組件化、增量式面向對象開發,直接搬到前端拖拽工具上,無代碼編程了。 總的來說,這上面的 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、背景 在前端JSON.stringfy是我們常用的一個方法,可以將一個對象序列化。 例如將如下對象序列化 const person = { name: 'kalory', age:18} JSON.stringfy(person) / ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...