到現(xiàn)在，接觸vue也小段時間了，項目進行到了一定程度，然而項目缺少了緩存機制，所以每次跳轉頁面都會重新created一下數據，雖說系統(tǒng)的數據請求速度很快，但是這樣做對系統(tǒng)的性能會有很大的壞處的，所以到這里就要對系統(tǒng)優(yōu)化下，添加緩存了。

其實到現(xiàn)在，對于vue還是沒有玩通，每深挖一次，就會發(fā)現(xiàn)一次vue的精彩，開始不清楚要用什么實現(xiàn)緩存，找了好久，有好幾種說法，就是用vuex、vuet或者keep-alive，然后對比了一下，在我認為，vuex和vuet是實現(xiàn)狀態(tài)管理，重心是在數據處理上；想要實現(xiàn)整體的緩存，阻止created的刷新，就要用keep-alive。

所以這里我想要給大家介紹下如何用keep-alive實現(xiàn)緩存的頁面？其實很簡單，就是幾句話而已。

1、keep-alive要配合router-view使用，這里要注意一點就是，keep-alive本身是vue2.0的功能，并不是vue-router的，所以再vue1.0版本是不支持的。keep-alive官方文檔點這里，代碼實現(xiàn)如下，router-view是在入口APP.vue里面

<template>
 <div id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--這里是其他的代碼-->
 </div>
</template>

2、這樣就會實現(xiàn)組件的緩存，但是有個缺點就是所有組件都會被緩存，可是現(xiàn)實中就是我們有些頁面還是要及時刷新的，比如列表數據，想要查看詳情的時候都是共用一個組件，只是刷新頁面，所以這個共用的組件是不能夠緩存的，不然會造成點其他的條目都是之前緩存的數據。那要怎么自定義呢，那就要在router-view里面多加個v-if判斷了，然后在router定義的文件里面在想要緩存的頁面多加上“meta:{keepAlive:true}”，不想要緩存就是“meta:{keepAlive:false}”或者不寫，只有為true的時候是會被keep-alive識別然后緩存的。

<template>
 <div id="app">
  <!--緩存想要緩存的頁面，實現(xiàn)后退不刷新-->
  <!--加上v-if的判斷，可以自定義想要緩存的組件，自定義在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--這里是其他的代碼-->
 </div>
</template>

3、在router文件加上meta判斷

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  {//home會被緩存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不會被緩存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

想要看有沒有緩存成功，可以在各個組件的created鉤子里面打印輸出標志，緩存成功就是首次進入頁面，created會請求數據，后面就不會再次請求而是直接調用緩存的

添加了緩存可以大大減少對系統(tǒng)性能的損壞，畢竟做數據處理型的系統(tǒng)，數據過于龐大，每次都要請求一下頁面是很不好的，有了緩存，該緩存的緩存，不想緩存也可以實時刷新

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論