Vue 頁面快取keep-alive

行走的羊駝駝發表於2018-12-15
Vue快取Keep-Alive
  1. keep-alive的基礎使用

最基礎的一般是結合動態元件去使用：

<keep-alive>
    <component :is="currentView"></component>
</keep-alive>
new Vue({
    el: '#app',
    data(){
        return {
            currentView: Test //Test為引入的子元件
        }
    }
})
複製程式碼
  1. 生命週期鉤子

被包含在 中建立的元件，會多出兩個生命週期的鉤子: activated 與 deactivated

activated 在元件被啟用時呼叫，在元件第一次渲染時也會被呼叫，之後每次keep-alive啟用時被呼叫。

deactivated 在元件被停用時呼叫。

注意：只有元件被 keep-alive 包裹時，這兩個生命週期才會被呼叫，如果作為正常元件使用，是不會被呼叫，以及在 2.1.0 版本之後，使用 exclude 排除之後，就算被包裹在 keep-alive 中，這兩個鉤子依然不會被呼叫！另外在服務端渲染時此鉤子也不會被呼叫的。

  1. 配合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>
複製程式碼
//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 即可。

  1. 在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>
複製程式碼

相關文章