首頁 >web前端 >js教程 >vue使用keep-alive實作資料快取不刷新實例分享

vue使用keep-alive實作資料快取不刷新實例分享

小云云原創: 2018-01-04 10:51:341373瀏覽

本文主要介紹了vue使用keep-alive實現資料快取不刷新，這裡整理了詳細的程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

到現在，接觸vue也小一段時間了，專案進行到了一定程度，然而專案缺少了快取機制，所以每次跳轉頁面都會重新created一下數據，雖說系統的數據請求速度很快，但是這樣做對系統的效能會有很大的壞處的，所以到這裡就要對系統優化下，加入快取了。

其實到現在，對於vue還是沒有玩通，每深挖一次，就會發現一次vue的精彩，開始不清楚要用什麼實現緩存，找了好久，有好幾種說法，就是用vuex、vuet或keep-alive，然後對比了一下，在我認為，vuex和vuet是實現狀態管理，重心是在資料處理上；想要實現整體的緩存，阻止created的刷新，就要用keep-alive。

所以這裡我想跟大家介紹下如何用keep-alive實作快取的頁面？其實很簡單，就是幾句話而已。

1、keep-alive要配合router-view使用，這裡要注意一點就是，keep-alive本身是vue2.0的功能，並不是vue-router的，所以再vue1.0版本是不支持的。 keep-alive官方文檔點這裡，程式碼實作如下，router-view是在入口APP.vue裡面

<template>
 <p id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </p>
</template>

2、這樣就會實作元件的緩存，但是有個缺點就是所有元件都會被緩存，可是現實中就是我們有些頁面還是要及時刷新的，比如列表數據，想要查看詳情的時候都是共用一個組件，只是刷新頁面，所以這個共用的組件是不能夠快取的，不然會造成點其他的條目都是之前快取的資料。那要怎麼自訂呢，那就要在router-view裡面多加個v-if判斷了，然後在router定義的檔案裡面在想要快取的頁面多加上“meta:{keepAlive:true}”，不要快取就是「meta:{keepAlive:false}」或不寫，只有為true的時候是會被keep-alive辨識然後快取的。

<template>
 <p id="app">
  <!--缓存想要缓存的页面，实现后退不刷新-->
  <!--加上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>
  
  <!--这里是其他的代码-->
 </p>
</template>

3、在router檔案加上meta判斷

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;

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會請求數據，後面就不會再次請求而是直接調用快取的

#添加了快取可以大大減少對系統效能的損壞，畢竟做資料處理型的系統，資料過於龐大，每次都要請求一下頁面是很不好的，有了緩存，該緩存的緩存，不想緩存也可以實時刷新。

vue使用keep-alive實作資料快取不刷新實例分享

相關文章