Vue實現前端頁面快取的過程

2022-07-01 14:00:54

Vue前端頁面快取

1.使用情景

在使用Vue開發單頁面應用時，我們通常會使用Vue-Router進行頁面導航，Vue-Router在進行路由切換的時候，頁面是會重新載入，對應的生命週期函數也會再次執行一遍，但是在有些業務場景下，

比如：

在有分頁資料列表中，切換到第三頁需要檢視列表對應資料的詳情頁面，然後返回，如果不加任何處理，列表頁面會重新載入，預設顯示第一頁資料，而不在是之前的第三頁，這樣如果還需要檢視之前檢視資料的下一條時，還需要切換到第三頁，如此反覆。
在列表頁面進行條件篩選查詢，查詢到對應的資料後查詢詳情，跳轉詳情頁面，然後在返回，列表預設會清空查詢條件，顯示所有資料。

以上兩種情景都會帶來很不好的使用者體驗。此時，就需要對列表頁面進行路由快取。在Vue-Router中可以使用keep-alive進行路由頁面快取。

2.keep-alive基本認識

Vue中提供了一個內建元件keep-alive，使用<keep-alive>元素將動態元件包裹起來，內部元件就會被快取起來。
<keep-alive>包裹的元件，載入過的頁面，再次進入時，是不會執行頁面第一次進入時的部分生命週期函數。
<keep-alive>包裹的元件會新增兩個生命週期函數activated和deactivated.
兩個屬性include和exclude可以讓<keep-alive>實現有條件的進行快取。include包含的元件會被進行快取，exclude包含的元件不會被快取。

3.keep-alive實現路由頁面快取

通過keep-alive實現路由頁面快取有兩種如下兩種方式：

（一）、使用include控制需要快取的頁面

// 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{
    // 在元件內路由守衛勾點函數中處理邏輯
    beforeRouteEnter (to, from, next) {
      if (from.name === 'Index') { // 處理頁面快取後，返回首頁再次進入快取頁時資料為更新
        // 該生命週期無法獲取到this，因此把vm範例當作引數傳遞
        next(vm => {
          vm.pages.pageNum = 1
          // 因為我這裡查詢表單是動態的，所以首頁進入時需要呼叫一次，在改方法中請求返回後呼叫了獲取列表資料getTableDatas方法
          vm.getQueryList()
        })
      } else if (!from.name) { // 處理重新整理頁面時，獲取動態表單方法未執行，導致表單無法載入
        next(vm => {
          vm.getQueryList()
        })
      } else {
        // 詳情返回時只更新列表資料，因為如果在詳情頁面做了操作，列表資料狀態會改變，其他使用快取
        next(vm => {
          vm.getTableDatas()
        })
      }
    }
  }
</script>

以上實現，是針對我自己專案業務場景的實現，如果查詢表單不是動態獲取的，是頁面寫死的，可以在activated勾點中呼叫查詢列表資料方法。這樣每次進入的快取頁面的時候，只會更新列表資料，不會改變其他快取。

問題：同樣會存在，列表快取資料後，返回首頁，再次進入列表頁面，快取資料還在，這樣可以在路由守衛beforeRouterLeave勾點中處理。

  activated() {
   this.getTableDatas()
  },
  beforeRouterLeave(to, from, next) {
  if (from.name === 'Index') {
    // 如果從首頁進入時呼叫重置方法
    this.reset()
  }
}

兩點注意：

要快取的路由元件必須設定name屬性，跟cashViews中的值對應；
如果要快取的元件比較多時，可以使用vuex管理cashViews。

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

在路由表routes中設定meta屬性，新增keepAlive屬性，需要快取的頁面設定keepAlive為true.

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

根據當前存取路由的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>

在元件的守衛勾點中修改keepAlive的值，控制頁面快取與否

// List.vue
export default {
  /* 從List元件離開時,修改keepAlive值為false，保證進入該頁面時頁面重新整理
  */
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  }
}

// Detail.vue
export default {
  /*從Detail返回List時，修改List的keepAlive為true,確保返回List頁面時使用快取不重新整理頁面
  */
  beforeRouteLeave(to, from, next){
    if(to.name === 'List') {
      to.meta.keepAlive = true
    }
    next()
  }
}

vue頁面快取問題

1.路由設定

routes：[
  {
     path: 'index',
     component: notice,
     meta: {
       keepAlive: true  // 是否快取標誌
     }
   }
]

主要設定元資訊（keepAlive）代表頁面需要快取

2.頁面路由巢狀設定

<keep-alive>
  // 將需要快取得頁面寫在keep-alive裡面
  <view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要快取得頁面寫在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>

頁面路由跳轉時將需要快取的頁面血再keep-alive標籤之中，不需要快取得頁面直接顯示

注：快取頁面會使頁面增加兩個生命週期 activated，deactivated

3.從指定頁面返回使用快取資料

其他頁面進入則從新載入資料

在需要快取的頁面加入如下程式碼

// 在進入頁面時先判斷是否是從詳情頁面返回
beforeRouterEnter (to, from, next) {
  if(to.path === '/detail') {
    this.$route.meta.isBack = true
  }
  next()
},
activated () {
  // 如果不是從詳情頁面返回，則重新載入資料
  if (!this.$route.meta.isBack) {
    //載入頁面資料
  }
  // 從新設定頁面得路由元資訊
  this.$route.meta.isBack = false
}

進入頁面先判斷是否從詳情返回，從詳情返回在頁面路由元資訊中加入標誌，在頁面載入過程中判斷是否從詳情返回，是則不載入資料，否則從新載入頁面資料，最後需要再次設定頁面路由元資訊，防止下回預設isBack: true,其他頁面進來不載入資料

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。