vue深坑記-keep-alive 路由緩存和清除

家好,我是yangyang.這兩天遇到了vue緩存問(wèn)題,看了很多資料,才解決.然后今天就轉(zhuǎn)發(fā)一篇文章

需求一:index搜索后跳轉(zhuǎn)詳情頁(yè)面，從詳情頁(yè)返回保留index搜索后的樣子

在app.vue里面的router-view外面包一層keep-alive include寫需要緩存的頁(yè)面的name (組件外面包keep-alive是必須步驟)

Keep-alive 緩存組件

<keep-alive> 是 Vue 提供的一個(gè)抽象組件，用于在組件切換時(shí)緩存組件的狀態(tài)或 DOM 節(jié)點(diǎn)，以便在下次再次渲染時(shí)能夠復(fù)用這些組件或 DOM 節(jié)點(diǎn)，提高性能。

當(dāng)你將組件包裹在 <keep-alive> 標(biāo)簽內(nèi)時(shí)，這個(gè)組件的狀態(tài)將被保留，而不會(huì)被銷毀。這樣，在組件切換時(shí)，如果下次再次渲染這個(gè)被緩存的組件時(shí)，Vue 會(huì)直接復(fù)用之前緩存的狀態(tài)而不是重新創(chuàng)建組件。

第一種(網(wǎng)上作者寫的)

在app.vue里面的router-view外面包一層keep-alive include寫需要緩存的頁(yè)面的name (組件外面包keep-alive是必須步驟)

第二種(個(gè)人寫)

<template>
  <div id="app">
    <div class="home">
      <!-- :key="$route.fullPath" -->
      <!-- <router-view  /> -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

? 從index頁(yè)面返回到最外面，再進(jìn)index的時(shí)候也保留了怎么進(jìn)入index的時(shí)候消除緩存呢？所以產(chǎn)生下面的需求

需求2：從其他地方進(jìn)入index的時(shí)候不保留緩存

使用destory destory后keep-alive不再緩存.我在index寫了一個(gè)組件內(nèi)的守衛(wèi)

但是這么寫的效果是：
刷新后初次進(jìn)index，搜索-->跳轉(zhuǎn)詳情頁(yè)面--> 返回index保留了搜索記錄-->返回index再上一層頁(yè)面比如導(dǎo)航頁(yè)面-->再進(jìn)index ,搜索-->跳轉(zhuǎn)詳情頁(yè)-->返回index的時(shí)候就不保留搜索記錄了

? 每次只有刷新后第一次進(jìn)index才保留這是什么原因呢？

在手動(dòng)銷毀組件index后，會(huì)創(chuàng)建另一個(gè)實(shí)例但keep-alive不再緩存它，每次顯示時(shí)都會(huì)重新創(chuàng)建一個(gè)新實(shí)例。
而我想要的效果是手動(dòng)銷毀后，重新創(chuàng)建index頁(yè)面并keep-alive緩存起來(lái)

include動(dòng)態(tài)綁定--推薦！

include綁定一個(gè)動(dòng)態(tài)數(shù)據(jù)，動(dòng)態(tài)修改緩存的內(nèi)容來(lái)達(dá)到清楚緩存組件的目的，而不是直接destory

? 踩坑：在app.vue頁(yè)面控制跳轉(zhuǎn)到詳情頁(yè)的時(shí)候緩存index，用了組件內(nèi)路由守衛(wèi) beforeRouteLeave

原因：因?yàn)槲疫@個(gè)單頁(yè)面應(yīng)用一直在app.vue里面沒離開過(guò)啊！

? 正確做法：監(jiān)聽$route來(lái)判斷去哪里然后改變include值

? 踩坑：我要去的是詳情頁(yè)面回index首頁(yè)不刷新+但是從nav頁(yè)面去index的時(shí)候要清除之前的記錄

那么去的name應(yīng)該是詳情以及index頁(yè)面的路由name

include直接寫死目標(biāo)緩存頁(yè)面，然后指定頁(yè)面不緩存


比如從結(jié)果設(shè)置頁(yè)面 設(shè)置完結(jié)果要刷新接口拿到最新的列表，但是緩存再不會(huì)刷新 
所以需要從result頁(yè)面返回的時(shí)候強(qiáng)制調(diào)用一下 某些接口


//結(jié)果頁(yè)面 點(diǎn)擊保存按鈕時(shí)：
  async handleSave () {
      try {
        await setResult(postDataObj)
        sessionStorage.setItem('isKeep', '/missionCenter/detail/result')  
        //此處異步套一個(gè)nexttick怕還沒本地存儲(chǔ)好就調(diào)走
        this.$nextTick(() => {
          this.$router.push({ name: 'missionCenter' })
        })
      } catch (error) {
        this.$toast.fail('設(shè)置結(jié)果失敗，請(qǐng)稍后重試')
      }
    },
    
    
//列表頁(yè)面：
  activated () {
    const arr = ['/customer/detail', '/missionCenter/detail/result']
    let form = sessionStorage.getItem('isKeep') || ''
    //判斷是否從 指定頁(yè)面result來(lái)，是的話再次調(diào)用 拿列表的方法   this.getDataList()去發(fā)請(qǐng)求
    if (arr.includes(form)) {
      this.currentId = this.$route.query.id || ''
      this.getcompleteDetail()
      this.page.pageNum = 1
      this.getDataList()
      sessionStorage.removeItem('isKeep')
    }
  },

個(gè)人的處理方式

通過(guò)這個(gè)作者的方法并沒有得到我要的效果.然后我的需求很簡(jiǎn)單,因此,首先我用了網(wǎng)上另外一種常見的方式(在最上面有我個(gè)人寫的),通過(guò)在route里配置meta keepAlive 屬性去判斷組件是否緩存.然后測(cè)試出來(lái),返回上一頁(yè)還是會(huì)渲染原來(lái)的數(shù)據(jù),最后我通過(guò)在頁(yè)面增加了一下代碼:

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.resetForm()
    })
  },
    
 resetForm:
      this.form = Object.assign({}, defaultForm)
      this.$set(this.form, 'scenes', [])

總結(jié)

組件外包keep-alive可以緩存避免路由跳轉(zhuǎn)的重復(fù)created
鉤子執(zhí)行步驟
假設(shè)2個(gè)頁(yè)面只寫了這4個(gè)鉤子函數(shù)，那么執(zhí)行順序是跳轉(zhuǎn)出去了才會(huì)執(zhí)行緩存的index頁(yè)面的deactivated鉤子

清除緩存可以通過(guò)動(dòng)態(tài)控制include的值
可以通過(guò)監(jiān)聽$route來(lái)判斷去哪的時(shí)候控制include值

Linux系統(tǒng)中,內(nèi)核會(huì)自動(dòng)將磁盤數(shù)據(jù)緩存在內(nèi)存中,以提高文件訪問(wèn)速度。這些緩存數(shù)據(jù)被稱為"頁(yè)面緩存"。雖然頁(yè)面緩存有助于提升系統(tǒng)性能,但當(dāng)系統(tǒng)內(nèi)存不足時(shí),它們也會(huì)占用大量?jī)?nèi)存,導(dǎo)致可用內(nèi)存不足,引發(fā)內(nèi)存壓力。

我們可以通過(guò)清理內(nèi)核緩存來(lái)釋放這部分內(nèi)存,緩解內(nèi)存壓力。

查看內(nèi)存使用情況

使用free命令查看系統(tǒng)內(nèi)存使用情況

在輸出中,buff/cache就是內(nèi)核緩存占用的內(nèi)存大小。當(dāng)buff/cache值較大,而available(可用內(nèi)存)較小時(shí),說(shuō)明內(nèi)核緩存占用了大量?jī)?nèi)存,導(dǎo)致可用內(nèi)存不足。

清理內(nèi)核緩存

通過(guò)以下兩個(gè)步驟清理內(nèi)核緩存:

使用 sync 命令將內(nèi)存數(shù)據(jù)同步到磁盤
使用 drop_caches 清空頁(yè)面緩存、目錄項(xiàng)緩存和inode緩存

drop_caches的取值范圍是0~3:

0: 不做任何操作

1: 只清理頁(yè)面緩存

2: 只清理目錄項(xiàng)和inode

3: 清理頁(yè)面緩存、目錄項(xiàng)和inode

清理完成后,再次查看內(nèi)存使用情況:

清理前

清理后

可以看到, buff/cache 值明顯降低,而 available 可用內(nèi)存大幅增加,內(nèi)存壓力得到緩解。

注意,清理內(nèi)核緩存雖然能臨時(shí)釋放內(nèi)存,但也會(huì)降低文件訪問(wèn)速度,因此不建議頻繁操作。

要：禁止input緩存，禁止select緩存

有時(shí)候，我們頁(yè)面的輸入框，類似：

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

我們?cè)夙?yè)面里輸入內(nèi)容后，并不保存，但是刷新頁(yè)面會(huì)發(fā)現(xiàn)值為輸入的頁(yè)面，完全沒有從新去從后臺(tái)取值，這是怎么回事呢？其實(shí)多數(shù)瀏覽器默認(rèn)會(huì)緩存input的值，只有使用ctl+F5強(qiáng)制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值，很簡(jiǎn)單，只需要價(jià)格屬性即可：autocomplete=”off”。

例如上面例子，改為如下就不會(huì)緩存啦：

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

聽說(shuō)還有一種直接加在form表單里也可以，但是因?yàn)槲乙呀?jīng)很久沒有用form表單提交數(shù)據(jù)啦，都是用ajax異步提交的，所以我就沒有采取這種方法，也很簡(jiǎn)單的如下：

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

當(dāng)然，沒試過(guò)不知道行不行，應(yīng)該是沒問(wèn)題的！

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：HTML代碼中的空格和空行

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商