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

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

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

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

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

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

<template> <div id="app">  <!--緩存想要緩存的頁(yè)面，實(shí)現(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會(huì)被緩存    path:"/home",    component:home,    meta:{keepAlive: true}  }  {//hello不會(huì)被緩存    path:"/hello",    component:hello,    meta:{keepAlive: false}  }})

想要看有沒(méi)有緩存成功，可以在各個(gè)組件的created鉤子里面打印輸出標(biāo)志，緩存成功就是首次進(jìn)入頁(yè)面，created會(huì)請(qǐng)求數(shù)據(jù)，后面就不會(huì)再次請(qǐng)求而是直接調(diào)用緩存的