Vue3除了keep-alive還有哪些實現頁面緩存詳解
前言
有這么一個需求：列表頁進入詳情頁后，切換回列表頁，需要對列表頁進行緩存，如果從首頁進入列表頁，就要重新加載列表頁。
對于這個需求，我的第一個想法就是使用keep-alive來緩存列表頁，列表和詳情頁切換時，列表頁會被緩存；從首頁進入列表頁時，就重置列表頁數據并重新獲取新數據來達到列表頁重新加載的效果。
但是，這個方案有個很不好的地方就是：如果列表頁足夠復雜，有下拉刷新、下拉加載、有彈窗、有輪播等，在清除緩存時，就需要重置很多數據和狀態(tài)，而且還可能要手動去銷毀和重新加載某些組件，這樣做既增加了復雜度，也容易出bug。
接下來說說我的想到的新實現方案（代碼基于Vue3）。
keep-alive 緩存和清除
keep-alive 緩存原理：進入頁面時，頁面組件渲染完成，keep-alive 會緩存頁面組件的實例；離開頁面后，組件實例由于已經緩存就不會進行銷毀；當再次進入頁面時，就會將緩存的組件實例拿出來渲染，因為組件實例保存著原來頁面的數據和Dom的狀態(tài)，那么直接渲染組件實例就能得到原來的頁面。
keep-alive 最大的難題就是緩存的清理，如果能有簡單的緩存清理方法，那么keep-alive 組件用起來就很爽。
但是，keep-alive 組件沒有提供清除緩存的API，那有沒有其他清除緩存的辦法呢？答案是有的。我們先看看 keep-alive 組件的props：
include - string | RegExp | Array。只有名稱匹配的組件會被緩存。
exclude - string | RegExp | Array。任何名稱匹配的組件都不會被緩存。
max - number | string。最多可以緩存多少組件實例。
從include描述來看，我發(fā)現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里，下次重新進入列表頁會重新加載列表組件，并且之后會繼續(xù)列表組件進行緩存。
列表頁清除緩存的時機
進入列表頁后清除緩存
在列表頁路由組件的beforeRouteEnter勾子中判斷是否是從其他頁面（Home）進入的，是則清除緩存，不是則使用緩存。
defineOptions({
name: 'List1',
beforeRouteEnter (to: RouteRecordNormalized, from: RouteRecordNormalized) {
if (from.name === 'Home') {
const { removeCacheEntry } = useRouteCache()
removeCacheEntry('List1')
}
}
})這種緩存方式有個不太友好的地方：當從首頁進入列表頁，列表頁和詳情頁來回切換，列表頁是緩存的；但是在首頁和列表頁間用瀏覽器的前進后退來切換時，我們更多的是希望列表頁能保留緩存，就像在多頁面中瀏覽器前進后退會緩存原頁面一樣的效果。但實際上，列表頁重新刷新了，這就需要使用另一種解決辦法，點擊鏈接時清除緩存清除緩存。
點擊鏈接跳轉前清除緩存
在首頁點擊跳轉列表頁前，在點擊事件的時候去清除列表頁緩存，這樣的話在首頁和列表頁用瀏覽器的前進后退來回切換，列表頁都是緩存狀態(tài)，只要當重新點擊跳轉鏈接的時候，才重新加載列表頁，滿足預期。
// 首頁 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>狀態(tài)管理實現緩存
通過狀態(tài)管理庫存儲頁面的狀態(tài)和數據也能實現頁面緩存。此處狀態(tài)管理使用的是pinia。
首先使用pinia創(chuàng)建列表頁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>狀態(tài)管理實現列表頁緩存</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() 來重置數據，否則使用緩存的數據狀態(tài)；之后根據 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
}
})缺點
通過狀態(tài)管理去做緩存的話，需要將狀態(tài)數據都存在stroe里，狀態(tài)多起來的話，會有點繁瑣，而且狀態(tài)寫在store里肯定沒有寫在列表組件里來的直觀；狀態(tài)管理由于只做列表頁數據的緩存，對于一些非受控組件來說，組件內部狀態(tài)改變是緩存不了的，這就導致頁面渲染后跟原來有差別，需要額外代碼操作。
頁面彈窗實現緩存
將詳情頁做成全屏彈窗，那么從列表頁進入詳情頁，就只是簡單地打開詳情頁彈窗，將列表頁覆蓋，從而達到列表頁 “緩存”的效果，而非真正的緩存。
這里還有一個問題，打開詳情頁之后，如果點后退，會返回到首頁，實際上我們希望是返回列表頁，這就需要給詳情彈窗加個歷史記錄，如列表頁地址為 '/list'，打開詳情頁變?yōu)?'/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>缺點
彈窗實現頁面緩存，局限比較大，只能在列表頁和詳情頁中才有效，離開列表頁之后，緩存就會失效，比較合適一些簡單緩存的場景。
父子路由實現緩存
該方案原理其實就是頁面彈窗，列表頁為父路由，詳情頁為子路由，從列表頁跳轉到詳情頁時，顯示詳情頁字路由，且詳情頁全屏顯示，覆蓋住列表頁。
聲明父子路由：
{
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>總結
到此這篇關于Vue3除了keep-alive還有哪些實現頁面緩存的文章就介紹到這了,更多相關Vue3頁面緩存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
element日歷calendar組件上月、今天、下月、日歷塊點擊事件及模板源碼
這篇文章主要介紹了element日歷calendar組件上月、今天、下月、日歷塊點擊事件及模板源碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
當el-select的disabled屬性為true的時候不展示“請選擇”字樣,如何去掉el-select 元素的 placeholder 屬性呢,下面小編通過示例代碼給大家分享el-select如何去掉placeholder屬性,感興趣的朋友一起看看吧2023-12-12
vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定的相關知識，本文通過實例代碼相結合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家介紹了vue?parseHTML函數源碼解析start鉤子函數，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文介紹了如何使用Vue 3編寫一個帶提示的表格組件,并假設每行都有一個保存按鈕,如果需要全部保存,還會加上驗證,感興趣的朋友一起看看吧2025-02-02
這篇文章主要教大家如何使用Vuex+Vue.js構建單頁應用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue 項目中使用Loading組件的示例代碼，使用 loding 過渡數據的加載時間2018-08-08
這篇文章主要給大家介紹了關于vue中三元表達式的相關資料,眾所周知三元表達式用來根據參數的不同執(zhí)行不同的代碼是很方便的,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue-列表下詳情的展開與折疊案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07