有這么一個(gè)需求：列表頁(yè)進(jìn)入詳情頁(yè)后，切換回列表頁(yè)，需要對(duì)列表頁(yè)進(jìn)行緩存，如果從首頁(yè)進(jìn)入列表頁(yè)，就要重新加載列表頁(yè)。

對(duì)于這個(gè)需求，我的第一個(gè)想法就是使用keep-alive來緩存列表頁(yè)，列表和詳情頁(yè)切換時(shí)，列表頁(yè)會(huì)被緩存；從首頁(yè)進(jìn)入列表頁(yè)時(shí)，就重置列表頁(yè)數(shù)據(jù)并重新獲取新數(shù)據(jù)來達(dá)到列表頁(yè)重新加載的效果。

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

接下來說說我的想到的新實(shí)現(xiàn)方案（代碼基于Vue3）。

keep-alive 緩存和清除

keep-alive 緩存原理：進(jìn)入頁(yè)面時(shí)，頁(yè)面組件渲染完成，keep-alive 會(huì)緩存頁(yè)面組件的實(shí)例；離開頁(yè)面后，組件實(shí)例由于已經(jīng)緩存就不會(huì)進(jìn)行銷毀；當(dāng)再次進(jìn)入頁(yè)面時(shí)，就會(huì)將緩存的組件實(shí)例拿出來渲染，因?yàn)榻M件實(shí)例保存著原來頁(yè)面的數(shù)據(jù)和Dom的狀態(tài)，那么直接渲染組件實(shí)例就能得到原來的頁(yè)面。

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

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

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

從include描述來看，我發(fā)現(xiàn)include是可以用來清除緩存，做法是：將組件名稱添加到include里，組件會(huì)被緩存；移除組件名稱，組件緩存會(huì)被清除。根據(jù)這個(gè)原理，用hook簡(jiǎn)單封裝一下代碼：

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)
????}
??}
??
??//?移除緩存的路由組件的實(shí)例
??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()

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

清除列表頁(yè)緩存如下：

import?useRouteCache?from?'@/hooks/useRouteCache'

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

此處removeCacheEntry方法清除的是列表組件的實(shí)例，'List' 值仍然在 組件的include里，下次重新進(jìn)入列表頁(yè)會(huì)重新加載列表組件，并且之后會(huì)繼續(xù)列表組件進(jìn)行緩存。

列表頁(yè)清除緩存的時(shí)機(jī)

進(jìn)入列表頁(yè)后清除緩存

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

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

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

點(diǎn)擊鏈接跳轉(zhuǎn)前清除緩存

在首頁(yè)點(diǎn)擊跳轉(zhuǎn)列表頁(yè)前，在點(diǎn)擊事件的時(shí)候去清除列表頁(yè)緩存，這樣的話在首頁(yè)和列表頁(yè)用瀏覽器的前進(jìn)后退來回切換，列表頁(yè)都是緩存狀態(tài)，只要當(dāng)重新點(diǎn)擊跳轉(zhuǎn)鏈接的時(shí)候，才重新加載列表頁(yè)，滿足預(yù)期。

// 首頁(yè) Home.vue

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


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

defineOptions({
  name: 'Home'
})

const { removeCacheEntry } = useRouteCache()

// 進(jìn)入頁(yè)面前，先清除緩存實(shí)例
function removeCacheBeforeEnter () {
  removeCacheEntry('List')
}
</script>

狀態(tài)管理實(shí)現(xiàn)緩存

通過狀態(tài)管理庫(kù)存儲(chǔ)頁(yè)面的狀態(tài)和數(shù)據(jù)也能實(shí)現(xiàn)頁(yè)面緩存。此處狀態(tài)管理使用的是pinia。

首先使用pinia創(chuàng)建列表頁(yè)store：

import?{?defineStore?}?from?'pinia'

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

const?useListStore?=?defineStore('list',?{
??//?推薦使用?完整類型推斷的箭頭函數(shù)
??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

然后在列表頁(yè)中使用store：

<div>
  <el-page-header @back="goBack">
    <template #content>狀態(tài)管理實(shí)現(xiàn)列表頁(yè)緩存</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="內(nèi)容"/>
    <el-table-column label="操作">
      <template v-slot="{ row }">
        <el-link type="primary" @click="gotoDetail(row)">進(jìn)入詳情</el-link>
        <el-tag type="success" v-if="row.id === listStore.curRow?.id">剛點(diǎn)擊</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鉤子判斷是否從首頁(yè)進(jìn)來，是則通過?listStore.$reset()?來重置數(shù)據(jù)，否則使用緩存的數(shù)據(jù)狀態(tài)；之后根據(jù)?listStore.isRefresh?標(biāo)示判斷是否重新獲取列表數(shù)據(jù)。

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
??}
})

缺點(diǎn)

通過狀態(tài)管理去做緩存的話，需要將狀態(tài)數(shù)據(jù)都存在stroe里，狀態(tài)多起來的話，會(huì)有點(diǎn)繁瑣，而且狀態(tài)寫在store里肯定沒有寫在列表組件里來的直觀；狀態(tài)管理由于只做列表頁(yè)數(shù)據(jù)的緩存，對(duì)于一些非受控組件來說，組件內(nèi)部狀態(tài)改變是緩存不了的，這就導(dǎo)致頁(yè)面渲染后跟原來有差別，需要額外代碼操作。

頁(yè)面彈窗實(shí)現(xiàn)緩存

將詳情頁(yè)做成全屏彈窗，那么從列表頁(yè)進(jìn)入詳情頁(yè)，就只是簡(jiǎn)單地打開詳情頁(yè)彈窗，將列表頁(yè)覆蓋，從而達(dá)到列表頁(yè) “緩存”的效果，而非真正的緩存。

這里還有一個(gè)問題，打開詳情頁(yè)之后，如果點(diǎn)后退，會(huì)返回到首頁(yè)，實(shí)際上我們希望是返回列表頁(yè)，這就需要給詳情彈窗加個(gè)歷史記錄，如列表頁(yè)地址為 '/list'，打開詳情頁(yè)變?yōu)?'/list?id=1'。

彈窗組件實(shí)現(xiàn)：

// 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后，初次渲染時(shí)，如果有url上有history參數(shù)，則自動(dòng)打開彈窗
  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>

彈窗組件調(diào)用：

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

缺點(diǎn)

彈窗實(shí)現(xiàn)頁(yè)面緩存，局限比較大，只能在列表頁(yè)和詳情頁(yè)中才有效，離開列表頁(yè)之后，緩存就會(huì)失效，比較合適一些簡(jiǎn)單緩存的場(chǎng)景。

父子路由實(shí)現(xiàn)緩存

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

聲明父子路由：

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

列表頁(yè)代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-462163.html

//?列表頁(yè)
<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="內(nèi)容"/>
????<el-table-column?label="操作">
??????<template?v-slot="{?row?}">
????????<el-link?type="primary"?@click="gotoDetail(row)">進(jìn)入詳情</el-link>
????????<el-tag?type="success"?v-if="row.id?===?curRow?.id">剛點(diǎn)擊</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"
??/>
??
??<!--?詳情頁(yè)?-->
??<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>

到了這里，關(guān)于Vue3 除了 keep-alive，還有哪些實(shí)現(xiàn)頁(yè)面緩存的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！