快捷導(dǎo)航

Vue實(shí)現(xiàn)前端頁(yè)面緩存的過(guò)程

更新時(shí)間：2022年07月01日 11:30:46 作者：高先生的貓

這篇文章主要介紹了Vue實(shí)現(xiàn)前端頁(yè)面緩存的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue前端頁(yè)面緩存

1.使用情景

在使用Vue開(kāi)發(fā)單頁(yè)面應(yīng)用時(shí)，我們通常會(huì)使用Vue-Router進(jìn)行頁(yè)面導(dǎo)航，Vue-Router在進(jìn)行路由切換的時(shí)候，頁(yè)面是會(huì)重新加載，對(duì)應(yīng)的生命周期函數(shù)也會(huì)再次執(zhí)行一遍，但是在有些業(yè)務(wù)場(chǎng)景下，

比如：

在有分頁(yè)數(shù)據(jù)列表中，切換到第三頁(yè)需要查看列表對(duì)應(yīng)數(shù)據(jù)的詳情頁(yè)面，然后返回，如果不加任何處理，列表頁(yè)面會(huì)重新加載，默認(rèn)顯示第一頁(yè)數(shù)據(jù)，而不在是之前的第三頁(yè)，這樣如果還需要查看之前查看數(shù)據(jù)的下一條時(shí)，還需要切換到第三頁(yè)，如此反復(fù)。
在列表頁(yè)面進(jìn)行條件篩選查詢，查詢到對(duì)應(yīng)的數(shù)據(jù)后查詢?cè)斍?，跳轉(zhuǎn)詳情頁(yè)面，然后在返回，列表默認(rèn)會(huì)清空查詢條件，顯示所有數(shù)據(jù)。

以上兩種情景都會(huì)帶來(lái)很不好的用戶體驗(yàn)。此時(shí)，就需要對(duì)列表頁(yè)面進(jìn)行路由緩存。在Vue-Router中可以使用keep-alive進(jìn)行路由頁(yè)面緩存。

2.keep-alive基本認(rèn)識(shí)

Vue中提供了一個(gè)內(nèi)置組件keep-alive，使用<keep-alive>元素將動(dòng)態(tài)組件包裹起來(lái)，內(nèi)部組件就會(huì)被緩存起來(lái)。
<keep-alive>包裹的組件，加載過(guò)的頁(yè)面，再次進(jìn)入時(shí)，是不會(huì)執(zhí)行頁(yè)面第一次進(jìn)入時(shí)的部分生命周期函數(shù)。
<keep-alive>包裹的組件會(huì)新增兩個(gè)生命周期函數(shù)activated和deactivated.
兩個(gè)屬性include和exclude可以讓<keep-alive>實(shí)現(xiàn)有條件的進(jìn)行緩存。include包含的組件會(huì)被進(jìn)行緩存，exclude包含的組件不會(huì)被緩存。

3.keep-alive實(shí)現(xiàn)路由頁(yè)面緩存

通過(guò)keep-alive實(shí)現(xiàn)路由頁(yè)面緩存有兩種如下兩種方式：

（一）、使用include控制需要緩存的頁(yè)面

// home.vue
<template>
?<div>
? ?...
? <keep-alive :include='cashViews'>
? ? <router-view></router-view>
? </keep-alive>
?</div>
</template> ?
<script>
? export default{
? ? data() {
? ? ? return {
? ? ? ? // 要緩存的組件
? ? ? ? cashViews: ['list']
? ? ? }
? ? }
? }
</script> ? ?

// list.vue
<script>
? export default{
? ? // 在組件內(nèi)路由守衛(wèi)鉤子函數(shù)中處理邏輯
? ? beforeRouteEnter (to, from, next) {
? ? ? if (from.name === 'Index') { // 處理頁(yè)面緩存后，返回首頁(yè)再次進(jìn)入緩存頁(yè)時(shí)數(shù)據(jù)為更新
? ? ? ? // 該生命周期無(wú)法獲取到this，因此把vm實(shí)例當(dāng)作參數(shù)傳遞
? ? ? ? next(vm => {
? ? ? ? ? vm.pages.pageNum = 1
? ? ? ? ? // 因?yàn)槲疫@里查詢表單是動(dòng)態(tài)的，所以首頁(yè)進(jìn)入時(shí)需要調(diào)用一次，在改方法中請(qǐng)求返回后調(diào)用了獲取列表數(shù)據(jù)getTableDatas方法
? ? ? ? ? vm.getQueryList()
? ? ? ? })
? ? ? } else if (!from.name) { // 處理刷新頁(yè)面時(shí)，獲取動(dòng)態(tài)表單方法未執(zhí)行，導(dǎo)致表單無(wú)法加載
? ? ? ? next(vm => {
? ? ? ? ? vm.getQueryList()
? ? ? ? })
? ? ? } else {
? ? ? ? // 詳情返回時(shí)只更新列表數(shù)據(jù)，因?yàn)槿绻谠斍轫?yè)面做了操作，列表數(shù)據(jù)狀態(tài)會(huì)改變，其他使用緩存
? ? ? ? next(vm => {
? ? ? ? ? vm.getTableDatas()
? ? ? ? })
? ? ? }
? ? }
? }
</script>

以上實(shí)現(xiàn)，是針對(duì)我自己項(xiàng)目業(yè)務(wù)場(chǎng)景的實(shí)現(xiàn)，如果查詢表單不是動(dòng)態(tài)獲取的，是頁(yè)面寫(xiě)死的，可以在activated鉤子中調(diào)用查詢列表數(shù)據(jù)方法。這樣每次進(jìn)入的緩存頁(yè)面的時(shí)候，只會(huì)更新列表數(shù)據(jù)，不會(huì)改變其他緩存。

問(wèn)題：同樣會(huì)存在，列表緩存數(shù)據(jù)后，返回首頁(yè)，再次進(jìn)入列表頁(yè)面，緩存數(shù)據(jù)還在，這樣可以在路由守衛(wèi)beforeRouterLeave鉤子中處理。

? activated() {
? ?this.getTableDatas()
? },
? beforeRouterLeave(to, from, next) {
? if (from.name === 'Index') {
? ? // 如果從首頁(yè)進(jìn)入時(shí)調(diào)用重置方法
? ? this.reset()
? }
}

兩點(diǎn)注意：

要緩存的路由組件必須設(shè)置name屬性，跟cashViews中的值對(duì)應(yīng)；
如果要緩存的組件比較多時(shí)，可以使用vuex管理cashViews。

（二)、根據(jù)v-if控制顯示的router-view

在路由表routes中配置meta屬性，新增keepAlive屬性，需要緩存的頁(yè)面設(shè)置keepAlive為true.

{? path: '/list',
? name: 'List',
? component: List,
? meta: {
? ? keepAlive: true
? }
}

根據(jù)當(dāng)前訪問(wèn)路由的keepAlive值控制是否緩存組件

// home.vue
<template>
? ...
? <keep-alive>
? ? <router-view v-if="$route.meta.keepAlive"></router-view>
? </keep-alive>
? <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>

在組件的守衛(wèi)鉤子中修改keepAlive的值，控制頁(yè)面緩存與否

// List.vue
export default {
? /* 從List組件離開(kāi)時(shí),修改keepAlive值為false，保證進(jìn)入該頁(yè)面時(shí)頁(yè)面刷新
? */
? beforeRouteLeave(to, from, next) {
? ? from.meta.keepAlive = false
? ? next()
? }
}

// Detail.vue
export default {
? /*從Detail返回List時(shí)，修改List的keepAlive為true,確保返回List頁(yè)面時(shí)使用緩存不刷新頁(yè)面
? */
? beforeRouteLeave(to, from, next){
? ? if(to.name === 'List') {
? ? ? to.meta.keepAlive = true
? ? }
? ? next()
? }
}

vue頁(yè)面緩存問(wèn)題

1.路由設(shè)置

routes：[
? {
? ? ?path: 'index',
? ? ?component: notice,
? ? ?meta: {
? ? ? ?keepAlive: true ?// 是否緩存標(biāo)志
? ? ?}
? ?}
]

主要設(shè)置元信息（keepAlive）代表頁(yè)面需要緩存

2.頁(yè)面路由嵌套設(shè)置

<keep-alive>
? // 將需要緩存得頁(yè)面寫(xiě)在keep-alive里面
? <view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要緩存得頁(yè)面寫(xiě)在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>

頁(yè)面路由跳轉(zhuǎn)時(shí)將需要緩存的頁(yè)面血再keep-alive標(biāo)簽之中，不需要緩存得頁(yè)面直接顯示

注：緩存頁(yè)面會(huì)使頁(yè)面增加兩個(gè)生命周期 activated，deactivated

3.從指定頁(yè)面返回使用緩存數(shù)據(jù)

其他頁(yè)面進(jìn)入則從新加載數(shù)據(jù)

在需要緩存的頁(yè)面加入如下代碼

// 在進(jìn)入頁(yè)面時(shí)先判斷是否是從詳情頁(yè)面返回
beforeRouterEnter (to, from, next) {
? if(to.path === '/detail') {
? ? this.$route.meta.isBack = true
? }
? next()
},
activated () {
? // 如果不是從詳情頁(yè)面返回，則重新加載數(shù)據(jù)
? if (!this.$route.meta.isBack) {
? ? //加載頁(yè)面數(shù)據(jù)
? }
? // 從新設(shè)置頁(yè)面得路由元信息
? this.$route.meta.isBack = false
}

進(jìn)入頁(yè)面先判斷是否從詳情返回，從詳情返回在頁(yè)面路由元信息中加入標(biāo)志，在頁(yè)面加載過(guò)程中判斷是否從詳情返回，是則不加載數(shù)據(jù)，否則從新加載頁(yè)面數(shù)據(jù)，最后需要再次設(shè)置頁(yè)面路由元信息，防止下回默認(rèn)isBack: true,其他頁(yè)面進(jìn)來(lái)不加載數(shù)據(jù)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: