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

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

點擊加入答題

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。