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

在搭建 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 之前，大部分是這樣實現的：

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

//router配置
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版本之后

在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>
</keeo-alive>

5. 需要注意的地方

• <keep-alive> 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當前組件 componetns 配置中的注冊名稱。
• <keep-alive> 不會在函數式組件中正常工作，因為它們沒有緩存實例。
• 當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先級最高(當前vue 2.4.2 version)。比如：包含于排除同時匹配到了組件A，那組件A不會被緩存。
• 包含在 <keep-alive> 中，但符合 exclude ，不會調用activated 和 deactivated。

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