vue使用keep-alive實現數據緩存不刷新

到如今，接觸vue也小段時間了，項目進行到了必定程度，然而項目缺乏了緩存機制，因此每次跳轉頁面都會從新created一下數據，雖然說系統的數據請求速度很快，可是這樣作對系統的性能會有很大的壞處的，因此到這裏就要對系統優化下，添加緩存了。
其實到如今，對於vue仍是沒有玩通，每深挖一次，就會發現一次vue的精彩，開始不清楚要用什麼實現緩存，找了很久，有好幾種說法，就是用vuex、vuet或者keep-alive，而後對比了一下，在我認爲，vuex和vuet是實現狀態管理，重心是在數據處理上；想要實現總體的緩存，阻止created的刷新，就要用keep-alive。
因此這裏我想要給你們介紹下如何用keep-alive實現緩存的頁面？其實很簡單，就是幾句話而已。

一、keep-alive要配合router-view使用，這裏要注意一點就是，keep-alive自己是vue2.0的功能，並非vue-router的，因此再vue1.0版本是不支持的。keep-alive官方文檔點這裏，代碼實現以下，router-view是在入口APP.vue裏面

<template>
  <div id="app">

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

二、這樣就會實現組件的緩存，可是有個缺點就是全部組件都會被緩存，但是現實中就是咱們有些頁面仍是要及時刷新的，好比列表數據，想要查看詳情的時候都是共用一個組件，只是刷新頁面，因此這個共用的組件是不可以緩存的，否則會形成點其餘的條目都是以前緩存的數據。那要怎麼自定義呢，那就要在router-view裏面多加個v-if判斷了，而後在router定義的文件裏面在想要緩存的頁面多加上「meta:{keepAlive:true}」，不想要緩存就是「meta:{keepAlive:false}」或者不寫，只有爲true的時候是會被keep-alive識別而後緩存的。

<template>
  <div 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>
    
    <!--這裏是其餘的代碼-->
  </div>
</template>

三、在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會請求數據，後面就不會再次請求而是直接調用緩存的

添加了緩存能夠大大減小對系統性能的損壞，畢竟作數據處理型的系統，數據過於龐大，每次都要請求一下頁面是很很差的，有了緩存，該緩存的緩存，不想緩存也能夠實時刷新