20190212問

vue中keepalive怎么理解？

說在前面: keep-alive是vue源碼中實現(xiàn)的一個組件, 感興趣的可以研究源碼 https://github.com/vuejs/vue/...

什么是keepalive

我們平時開發(fā)中, 總有部分組件沒有必要多次init, 我們需要將組件進(jìn)行持久化，使組件狀態(tài)維持不變，在下一次展示時， 也不會進(jìn)行重新init

keepalive音譯過來就是保持活著, 所以在vue中我們可以使用keepalive來進(jìn)行組件緩存

基本使用

// 被keepalive包含的組件會被進(jìn)行緩存 <keep-alive><component /> </keep-alive>

上面提到被keepalive包含的組件不會被再次init，也就意味著不會重走生命周期函數(shù), 但是平常工作中很多業(yè)務(wù)場景是希望我們緩存的組件在再次渲染的能做一些事情,vue為keepalive提供了兩個額外的hook

• activated 當(dāng)keepalive包含的組件再次渲染的時候觸發(fā)
• deactivated 當(dāng)keepalive包含的組件銷毀的時候觸發(fā)

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

參數(shù)

keepalive可以接收3個屬性做為參數(shù)進(jìn)行匹配對應(yīng)的組件進(jìn)行緩存

• include 包含的組件
• exclude 排除的組件
• max 緩存組件的最大值

其中include,exclude可以為字符，數(shù)組，以及正則表達(dá)式
max 類型為字符或者數(shù)字

代碼理解

// 只緩存組件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優(yōu)先于include， 下面的例子也就是只緩存a組件 <keep-alive include="a,b" exclude="b"> <component :is="currentView"/> </keep-alive>// 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個緩存的組件 <keep-alive exclude="c" max="5"> <component :is="currentView"/> </keep-alive>

配合router使用

<!-- template --> // 意思就是$router.meta.keepAlive值為真是將組件進(jìn)行緩存 <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}] })

總結(jié)

keepalive是一個抽象組件，緩存vnode，緩存的組件不會被mounted，為此提供activated 和 deactivated 鉤子函數(shù), 使用props max 可以控制緩存組件個數(shù)

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

• 注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的JS每日一题:vue中keepalive怎么理解？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。