vue頁面刷新與緩存

在vue項目中，有些組件不必屢次渲染，咱們須要組件在內存中緩存下來。此時keep-alive就能夠派上用場了，keep-alive可使被包含的組件狀態維持不變，即使是組件切換了，其內的狀態依舊維持在內存之中。在下一次顯示時，也不會重現渲染。

---

PS：keep-alive 與 transition類似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，好比：你永遠在 this.$parent 中找不到 keep-alive 。

1.keep-alive的基礎使用

最基礎的通常是結合動態組件去使用：

<keep-alive>
    <component :is="currentView"></component>
</keep-alive>

new Vue({
    el: '#app',
    data(){
        return {
            currentView: Test //Test爲引入的子組件
        }
    }
})

2.生命週期鉤子

被包含在 <keep-alive> 中建立的組件，會多出兩個生命週期的鉤子: activated 與 deactivated

• activated

在組件被激活時調用，在組件第一次渲染時也會被調用，以後每次keep-alive激活時被調用。

• deactivated

在組件被停用時調用。

注意：只有組件被 keep-alive 包裹時，這兩個生命週期纔會被調用，若是做爲正常組件使用，是不會被調用，以及在 2.1.0 版本以後，使用 exclude 排除以後，就算被包裹在 keep-alive 中，這兩個鉤子依然不會被調用！另外在服務端渲染時此鉤子也不會被調用的。

3.配合router-view使用

有些時候可能須要將整個路由頁面一切緩存下來，也就是將 router-view 進行緩存。這種使用場景仍是蠻多的。

在vue 2.1.0 以前，大部分是這樣實現的：

<keep-alive>
    <router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-view>

new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B
        }
    ]
})

這樣配置路由的路由元信息以後，a路由的 $router.meta.keepAlive 便爲 true ，而b路由則爲 false 。
因此爲 true 的將被包裹在 keep-alive 中，爲 false 的則在外層。這樣a路由便達到了被緩存的效果，若是還有想要緩存的路由，只須要在路由元中加入 keepAlive: true 便可。

4.在2.1.0版本以後配合router-view使用

在vue 2.1.0 版本以後，keep-alive 新加入了兩個屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存，優先級大於include) 。

include 和 exclude 屬性容許組件有條件地緩存。兩者均可以用逗號分隔字符串、正則表達式或一個數組來表示。
當使用正則或者是數組時，必定要使用 v-bind !

<!-- 逗號分隔字符串，只有組件a與b被緩存。這樣使用場景變得更有意義了 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正則表達式 (須要使用 v-bind，符合匹配規則的都會被緩存) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (須要使用 v-bind，被包含的都會被緩存) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

有了include以後，再與 router-view 一塊兒使用時便方便許多了：

<!-- 一個include解決了，不須要多寫一個標籤，也不須要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keep-alive>

4.須要注意的地方

1. keep-alive 先匹配被包含組件的 name 字段，若是 name 不可用，則匹配當前組件 componetns 配置中的註冊名稱。對於router-view來講，則是匹配路由器註冊時的name與路由對應組件的name值。
2. keep-alive 不會在函數式組件中正常工做，由於它們沒有緩存實例。
3. 當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先級最高。好比：包含於排除同時匹配到了組件A，那組件A不會被緩存。
4. 包含在 keep-alive 中，但符合 exclude ，不會調用activated 和 deactivated。

5.router-view的強制刷新

使用keep-alive有一個後遺症，就是若是進入同一個路由帶動態參數或者查詢參數改變的話，頁面會一直使用最開始緩存的頁面，頁面不會再進行刷新請求參數。利用watch來監控$route是一個方法，但也不是特別好用，由於若是隻是查詢參數改變的話是不會觸發改變的。

different router the same component vue。真實的業務場景中，這種狀況不少。

建立和編輯的頁面使用的是同一個component，默認狀況下當這兩個頁面切換時並不會觸發vue的created或者mounted鉤子，官方說你能夠經過watch $route的變化來作處理，但其實說真的仍是蠻麻煩的。後來發現其實能夠簡單的在 router-view上加上一個惟一的key，來保證路由切換時都會從新渲染觸發鉤子了。這樣簡單的多了。

<router-view :key="key"></router-view>

<script>
export default {
  computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    }
  }
};
</script>

參考資料:

keep-alive的深刻理解與使用(配合router-view緩存整個路由頁面)

手摸手，帶你用vue擼後臺 系列二(登陸權限篇)