JS每日一題:vue中keepalive怎麼理解？

20190212問

vue中keepalive怎麼理解？

說在前面: keep-alive是vue原始碼中實現的一個元件, 感興趣的可以研究原始碼 https://github.com/vuejs/vue/…

什麼是keepalive

我們平時開發中, 總有部分元件沒有必要多次init, 我們需要將元件進行持久化，使元件狀態維持不變，在下一次展示時， 也不會進行重新init

keepalive音譯過來就是保持活著, 所以在vue中我們可以使用keepalive來進行元件快取

基本使用

// 被keepalive包含的元件會被進行快取
<keep-alive>
    <component />
</keep-alive>

上面提到被keepalive包含的元件不會被再次init，也就意味著不會重走生命週期函式, 但是平常工作中很多業務場景是希望我們快取的元件在再次渲染的能做一些事情,vue為keepalive提供了兩個額外的hook

• activated 當keepalive包含的元件再次渲染的時候觸發
• deactivated 當keepalive包含的元件銷燬的時候觸發

注: 2.1.0 版本後keepalive包含但被exclude排除的元件不會有以上兩個hook

引數

keepalive可以接收3個屬性做為引數進行匹配對應的元件進行快取

• include 包含的元件
• exclude 排除的元件
• max 快取元件的最大值

其中include,exclude可以為字元，陣列，以及正規表示式
max 型別為字元或者數字

程式碼理解

// 只快取元件name為a或者b的元件
<keep-alive include="a,b"> 
  <component :is="currentView" />
</keep-alive>

// 元件名為c的元件不快取
<keep-alive exclude="c"> 
  <component :is="currentView"/>
</keep-alive>

// 如果同時使用include,exclude,那麼exclude優先於include， 下面的例子也就是隻快取a元件
<keep-alive include="a,b" exclude="b"> 
  <component :is="currentView"/>
</keep-alive>

// 如果快取的元件超過了max設定的值5，那麼將刪除第一個快取的元件
<keep-alive exclude="c" max="5"> 
  <component :is="currentView"/>
</keep-alive>

配合router使用

<!-- template -->
// 意思就是$router.meta.keepAlive值為真是將元件進行快取
<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
        }
    ]
})

總結

keepalive是一個抽象元件，快取vnode，快取的元件不會被mounted，為此提供activated 和 deactivated 鉤子函式, 使用props max 可以控制快取元件個數

關於JS每日一題

JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

• 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點選加入答題