vue項目緩存最佳實踐

来源:https://www.cnblogs.com/xwanzi/archive/2019/07/11/11171137.html
-Advertisement-
Play Games

需求 在開發vue的項目中有遇到了這樣一個需求：一個視頻列表頁面，展示視頻名稱和是否收藏，點擊進去某一項觀看，可以收藏或者取消收藏，返回的時候需要記住列表頁面的頁碼等狀態，同時這條視頻的收藏狀態也需要更新, 但是從其他頁面進來視頻列表頁面的時候不緩存這個頁面，也就是進入的時候是視頻列表頁面的第一頁 ...


需求

在開發vue的項目中有遇到了這樣一個需求：一個視頻列表頁面，展示視頻名稱和是否收藏，點擊進去某一項觀看，可以收藏或者取消收藏，返回的時候需要記住列表頁面的頁碼等狀態，同時這條視頻的收藏狀態也需要更新, 但是從其他頁面進來視頻列表頁面的時候不緩存這個頁面，也就是進入的時候是視頻列表頁面的第一頁

一句話總結一下： pageAList->pageADetail->pageAList, 緩存pageAList, 同時該視頻的收藏狀態如果發生變化需要更新， 其他頁面->pageAList, pageAList不緩存

在網上找了很多別人的方法，都不滿足我們的需求

然後我們團隊幾個人搗鼓了幾天，還真的整齣了一套方法，實現了這個需求

實現後的效果

無圖無真相，用一張gif圖來看一下實現後的效果吧！！！

操作流程：

  • 首頁->pageAList, 跳轉第二頁 ->首頁-> pageAList，頁碼顯示第一頁，說明從其他頁面進入pageAList, pageAList頁面沒有被緩存
  • pageAList， 跳轉到第三頁，點擊視頻22 -> 進入視頻詳情頁pageADetail，點擊收藏，收藏成功，點擊返回 -> pageAList顯示的是第三頁，並且視頻22的收藏狀態從未收藏變成已收藏，說明從pageADetail進入pageAList，pageAList頁面緩存了，並且更新了狀態

說明：

  • 二級緩存: 也就是從A->B->A，緩存A
  • 三級緩存：A->B->C->B->A, 緩存A，B
    因為項目裡面絕大部分是二級緩存，這裡我們就做二級緩存，但是這不代表我的這個緩存方法不適用三級緩存，三級緩存後面我也會講如何實現

實現二級緩存

用vue-cli2的腳手架搭建了一個項目，用這個項目來說明如何實現
先來看看項目目錄


刪除了無用的components目錄和assets目錄，新增了src/pages目錄和src/store目錄, pages頁面用來存放頁面組件， store不多說，存放vuex相關的東西,新增了server/app.js目錄，用來啟動後臺服務

 

1. 前提條件

  • 項目引入vue，vuex, vue-router，axios等vue全家桶
  • 引入element-ui，只是為了項目美觀，畢竟本人懶癌晚期，不想自己寫樣式
  • 在config/index.js裡面配置前端代理
  • 引入express，啟動後臺，後端開3003埠，給前端提供api支持
    來看看服務端代碼server/app.js,非常簡單，就是造了30條數據，寫了3個介面，幾十行文件直接搭建了一個node伺服器，簡單粗暴解決數據模擬問題，會mock用mock也行
const express = require('express')
// const bodyParser = require('body-parser')
const app = express()
let allList = Array.from({length: 30}, (v, i) => ({
  id: i,
  name: '視頻' + i,
  isCollect: false
}))
// 後臺設置允許跨域訪問
// 前後端都是本地localhost，所以不需要設置cors跨域，如果是部署在伺服器上，則需要設置
// app.all('*', function (req, res, next) {
//   res.header('Access-Control-Allow-Origin', '*')
//   res.header('Access-Control-Allow-Headers', 'X-Requested-With')
//   res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
//   res.header('X-Powered-By', ' 3.2.1')
//   res.header('Content-Type', 'application/json;charset=utf-8')
//   next()
// })
app.use(express.json())
app.use(express.urlencoded({extended: false}))
// 1 獲取所有的視頻列表
app.get('/api/getVideoList', function (req, res) {
  let query = req.query
  let currentPage = query.currentPage
  let pageSize = query.pageSize
  let list = allList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
  res.json({
    code: 0,
    data: {
      list,
      total: allList.length
    }
  })
})
// 2 獲取某一條視頻詳情
app.get('/api/getVideoDetail/:id', function (req, res) {
  let id = Number(req.params.id)
  let info = allList.find(v => v.id === id)
  res.json({
    code: 0,
    data: info
  })
})
// 3 收藏或者取消收藏視頻
app.post('/api/collectVideo', function (req, res) {
  let id = Number(req.body.id)
  let isCollect = req.body.isCollect
  allList = allList.map((v, i) => {
    return v.id === id ? {...v, isCollect} : v
  })
  res.json({code: 0})
})
const PORT = 3003
app.listen(PORT, function () {
  console.log('app is listening port' + PORT)
})

2. 路由配置

在路由配置裡面把需要緩存的路由的meta添加keepAlive屬性，值為true, 這個想必大家都知道，是緩存路由組件的
在我們項目裡面，需要緩存的路由是pageAList，所以這個路由的meta的keepAlive設置成true,其他路由正常寫，路由文件src/router/index.js如下：

import Vue from 'vue'
import Router from 'vue-router'
import home from '../pages/home'
import pageAList from '../pages/pageAList'
import pageADetail from '../pages/pageADetail'
import pageB from '../pages/pageB'
import main from '../pages/main'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'main',
      component: main,
      redirect: '/home',
      children: [
        {
          path: 'home',
          name: 'home',
          component: home
        },
        {
          path: 'pageAList',
          name: 'pageAList',
          component: pageAList,
          meta: {
            keepAlive: true
          }
        },
        {
          path: 'pageB',
          component: pageB
        }
      ]
    },
    {
      path: '/pageADetail',
      name: 'pageADetail',
      component: pageADetail
    }
  ]
})

3. vuex配置

vuex的store.js裡面存儲一個名為excludeComponents的數組,這個數組用來操作需要做緩存的組件

state.js

const state = {
  excludeComponents: [] 
}
export default state

同時在mutations.js裡面加入兩個方法， addExcludeComponent是往excludeComponents裡面添加元素的，removeExcludeComponent是往excludeComponents數組裡面移除元素

註意： 這兩個方法的第二個參數是數組或者組件name

mutations.js

const mutations = {
  addExcludeComponent (state, excludeComponent) {
    let excludeComponents = state.excludeComponents
    if (Array.isArray(excludeComponent)) {
      state.excludeComponents = [...new Set([...excludeComponents, ...excludeComponent])]
    } else {
      state.excludeComponents = [...new Set([...excludeComponents, excludeComponent])]
    }
  },
  // excludeComponent可能是組件name字元串或者數組
  removeExcludeComponent (state, excludeComponent) {
    let excludeComponents = state.excludeComponents
    if (Array.isArray(excludeComponent)) {
      for (let i = 0; i < excludeComponent.length; i++) {
        let index = excludeComponents.findIndex(v => v === excludeComponent[i])
        if (index > -1) {
          excludeComponents.splice(index, 1)
        }
      }
    } else {
      for (let i = 0, len = excludeComponents.length; i < len; i++) {
        if (excludeComponents[i] === excludeComponent) {
          excludeComponents.splice(i, 1)
          break
        }
      }
    }
    state.excludeComponents = excludeComponents
  }
}
export default mutations

4. keep-alive包裹router-view

將App.vue的router-view用keep-alive組件包裹， main.vue的路由也需要這麼包裹，這點非常重要，因為pageAList組件是從它們的router-view中匹配的

<keep-alive :exclude="excludeComponents"><som-component></some-component></keep-alive>這個寫法大家應該不會陌生，這也是尤大神官方推薦的緩存方法, exclude屬性值可以是組件名稱字元串(組件選項的name屬性)或者數組，代表不緩存這些組件，所以vuex裡面的addExcludeComponent是代表要緩存組件，addExcludeComponent代表不緩存組件，這裡稍微有點繞，請牢記這個規則，這樣接下來你就不會被繞進去了。

App.vue

<template>
  <div id="app">
    <keep-alive :exclude="excludeComponents">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    excludeComponents () {
      return this.$store.state.excludeComponents
    }
  }
}
</script

main.vue

<template>
  <div>
    <ul>
      <li v-for="nav in navs" :key="nav.name">
        <router-link :to="nav.name">{{nav.title}}</router-link>
      </li>
    </ul>
    <keep-alive :exclude="excludeComponents">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'main.vue',
  data () {
    return {
      navs: [{
        name: 'home',
        title: '首頁'
      }, {
        name: 'pageAList',
        title: 'pageAList'
      }, {
        name: 'pageB',
        title: 'pageB'
      }]
    }
  },
  methods: {
  },
  computed: {
    excludeComponents () {
      return this.$store.state.excludeComponents
    }
  },
  created () {
  }
}
</script>

接下來的兩點設置非常重要

5. 一級組件

對於需要緩存的一級路由pageAList，添加兩個路由生命周期鉤子beforeRouteEnter和beforeRouteLeave

import {getVideoList} from '../api'
export default {
  name: 'pageAList', // 組件名稱，和組件對應的路由名稱不需要相同
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      allList: [],
      list: []
    }
  },
  methods: {
    getVideoList () {
      let params = {currentPage: this.currentPage, pageSize: this.pageSize}
      getVideoList(params).then(r => {
        if (r.code === 0) {
          this.list = r.data.list
          this.total = r.data.total
        }
      })
    },
    goIntoVideo (item) {
      this.$router.push({name: 'pageADetail', query: {id: item.id}})
    },
    handleCurrentPage (val) {
      this.currentPage = val
      this.getVideoList()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$store.commit('removeExcludeComponent', 'pageAList')
      next()
    })
    },
  beforeRouteLeave (to, from, next) {
    let reg = /pageADetail/
    if (reg.test(to.name)) {
      this.$store.commit('removeExcludeComponent', 'pageAList')
    } else {
      this.$store.commit('addExcludeComponent', 'pageAList')
    }
    next()
  },
  activated () {
    this.getVideoList()
  },
  mounted () {
    this.getVideoList()
  }
}
  • beforeRouteEnter,進入這個組件pageAList之前，在excludeComponents移除當前組件，也就是緩存當前組件，所以任何路由跳轉到這個組件，這個組件其實都是被緩存的，都會觸發activated鉤子
  • beforeRouteLeave： 離開當前頁面，如果跳轉到pageADetail,那麼就需要在excludeComponents移除當前組件pageAList，也就是緩存當前組件，如果是跳轉到其他頁面，就需要把pageAList添加進去excludeComponents，也就是不緩存當前組件
  • 獲取數據的方法getVideoList在mounted或者created鉤子裡面調取，如果二級路由更改數據，一級路由需要更新，那麼就需要在activated鉤子里再獲取一次數據，我們這個詳情可以收藏，改變列表的狀態，所以這兩個鉤子都使用了

6. 二級組件

對於需要緩存的一級路由的二級路由組件pageADetail，添加beforeRouteLeave路由生命周期鉤子

在這個beforeRouteLeave鉤子裡面，需要先清除一級組件的緩存狀態，如果跳轉路由匹配到一級組件，再緩存一級組件

beforeRouteLeave (to, from, next) {
    let componentName = ''
    // 離開詳情頁時,將pageAList添加到exludeComponents里，也就是將需要緩存的頁面pageAList置為不緩存狀態
    let list = ['pageAList']
    this.$store.commit('addExcludeComponent', list)
    // 緩存組件路由名稱到組件name的映射
    let map = new Map([['pageAList', 'pageAList']])
    componentName = map.get(to.name) || ''
    // 如果離開的時候跳轉的路由是pageAList，將pageAList從exludeComponents裡面移除，也就是要緩存pageAList
    this.$store.commit('removeExcludeComponent', componentName)
    next()
  }

7.實現方法總結

  • 進入了pageAList，就在beforeRouteEnter里緩存了它，離開當前組件的時候有兩種情況：
    • 1 跳轉進去pageADetail，在pageAList的beforeRouteLeave鉤子裡面緩存pageAList，從pageADetail離開的時候，也有兩種情況
      • (1) 回到pageAList，那麼在pageADetail的beforeRouteLeave鉤子裡面緩存了pageAList，所以這就是從pageAList-pageADetail-pageAList的時候，pageAList可以被緩存，還是之前的頁碼狀態
      • (2) 進入其他路由，在pageADetail的beforeRouteLeave鉤子裡面清除了pageAList的緩存
    • 2 跳轉到非pageADetail的頁面，在pageAList的beforeRouteLeave鉤子裡面清除pageAList的緩存

方案評估

自認為用這個方案來實現緩存，最終的效果非常完美了
缺點：

  1. 代碼有點多，緩存代碼不好復用
  2. 性能問題：如果在要緩存的一級組件裡面寫了activated鉤子，那麼從非一級組件對應的二級組件進入到要緩存的一級組件的時候，會發送兩次介面請求數據，mounted裡面一次, activated裡面一次, 所以如果想追求幾行代碼完美解決緩存問題的，這裡就有點無能為力了

項目源碼

項目源碼的github地址，歡迎大家克隆下載

項目啟動與效果演示

  1. npm install安裝項目依賴
  2. npm run server啟動後臺伺服器監聽本地3003埠
  3. npm run dev啟動前端項目

三級緩存

上面的方法二級緩存就夠了
上面我們說的是兩個頁面，二級緩存的問題，現在假設有三個頁面，A1-A2-A3,一步步點進去，要求從A3返回到A2的時候，緩存A2，再從A2返回A1的時候，緩存A1，大家可以自己動手研究下，這裡就不寫了，其實就是上面的思路，留給大家研究，大家可以關註我的微信公眾號，裡面有三級緩存的代碼答案。

對不起，還是不能免俗，不管你們如何不滿，我還是要給我的公眾號打廣告，名字很俗，前端研究中心，但是內容不俗，不定期更新優質前端內容：原創或者翻譯國外優秀教程，下麵是公眾號的二維碼，歡迎大家掃碼加入，一起學習和進步。

近期優質文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript_day02
    10.隨機數 隨機數一般和數組組合使用。 生成隨機數：使用Math.random()函數，生成的隨機數0-1。一般乘以10^n擴大隨機數範圍。 Math.round()函數和parseInt()函數。 Math.round()：對小數四捨五入。 parseInt()：直接把小數點後面的去掉，不四舍五 ...
  • 世界上最大的軟體註冊表-----npm
    npm 是什麼? npm 為你和你的團隊打開了連接整個 JavaScript 天才世界的一扇大門。它是世界上最大的軟體註冊表，每星期大約有 30 億次的下載量，包含超過 600000 個 包（package） （即，代碼模塊）。來自各大洲的開源軟體開發者使用 npm 互相分享和借鑒。包的結構使您能夠 ...
  • 每天學點node系列-zlib
    永不放棄，永不放棄又有兩個原則，第一個原則是永不放棄，第二個原則就是：當你想放棄時回頭看第一個原則。 概覽 做過web性能優化的同學，對性能優化大殺器gzip應該不陌生。瀏覽器向伺服器發起資源請求，比如下載一個js文件，伺服器先對資源進行壓縮，再返回給瀏覽器，以此節省流量，加快訪問速度。 瀏覽器通過 ...
  • JavaScript_01-script
    編譯和解釋 var a = 0; console.log(a); var b = "abc"; 編譯： 一次性把代碼轉換成 CPU 可以看懂的語言，一行一行執行； 解釋：一行一行解析，解析一行執行一行； C、 C++、 C 、 Java 屬於編譯型語言。 在速度方面編譯型語言更快，所以 JavaSc ...
  • VueRouter認識
    1、 什麼是路由？ 註意：作為vue的插件，需要單獨引入js文件，且必須在vue.js之後引入。 <router-link to=“跳轉路徑”></router-link>：該標簽會預設被解析成<a>標簽 <router-view></router-view>：該標簽用於展示組件中的內容，是路由的出 ...
  • 小程式實踐（十三）：父子控制項點擊事件衝突
    一半出現於view嵌套view的情況，當父子控制項的點擊都設置為 bindtap的時候，會出現點擊觸發了父view的點擊監聽。 要想父子view各監聽到自己的實踐，需要將子view的點擊改為catchtap ,並添加:hover-stop-propagation='true' , 父容器繼續用bind ...
  • django js 實現表格動態標序號
    序號 類目 關鍵詞 操作 {% f... ...
  • javascript 區域外事件捕捉setCapture
    今天遇到了這個方法，便去度娘瞭解了下 函數功能：該函數在屬於當前線程的指定視窗里設置滑鼠捕獲。一旦視窗捕獲了滑鼠，所有滑鼠輸入都針對該視窗，無論游標是否在視窗的邊界內。同一時刻只能有一個視窗捕獲滑鼠。如果滑鼠游標在另一個線程創建的視窗上，只有當滑鼠鍵按下時系統才將滑鼠輸入指向指定的視窗。 setCa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類