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

20190212問

vue中keepalive怎麼理解？

說在前面: keep-alive是vue源碼中實現的一個組件, 感興趣的能夠研究源碼 github.com/vuejs/vue/b…

什麼是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點推送當天的參考答案

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

點擊加入答題