20190212問

vue中keepalive怎么理解？

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

什么是keepalive

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

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

基本使用

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

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

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

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

參數(shù)

keepalive可以接收3個(gè)屬性做為參數(shù)進(jìn)行匹配對(duì)應(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>// 如果同時(shí)使用include,exclude,那么exclude優(yōu)先于include， 下面的例子也就是只緩存a組件 <keep-alive include="a,b" exclude="b"> <component :is="currentView"/> </keep-alive>// 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件 <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是一個(gè)抽象組件，緩存vnode，緩存的組件不會(huì)被mounted，為此提供activated 和 deactivated 鉤子函數(shù), 使用props max 可以控制緩存組件個(gè)數(shù)

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

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

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

點(diǎn)擊加入答題

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

總結(jié)

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

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