Vue中keep-alive的使用

概念
????keep-alive 是 Vue 的內(nèi)置組件,當(dāng)它包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,而不是銷(xiāo)毀它們。和 transition 相似,keep-alive 是一個(gè)抽象組件:它自身不會(huì)渲染成一個(gè) DOM 元素,也不會(huì)出現(xiàn)在父組件鏈中。

image

作用
????在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,減少加載時(shí)間及性能消耗,提高用戶體驗(yàn)性

原理
????在 created 函數(shù)調(diào)用時(shí)將需要緩存的 VNode 節(jié)點(diǎn)保存在 this.cache 中/在 render(頁(yè)面渲染) 時(shí),如果 VNode 的 name 符合緩存條件(可以用 include 以及 exclude 控制),則會(huì)從 this.cache 中取出之前緩存的 VNode 實(shí)例進(jìn)行渲染。

VNode:虛擬DOM,其實(shí)就是一個(gè)JS對(duì)象

Props
include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。
exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。
max - 數(shù)字。最多可以緩存多少組件實(shí)例。
生命周期函數(shù)
??1. activated

在 keep-alive 組件激活時(shí)調(diào)用
??????該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用

2. deactivated

在 keep-alive 組件停用時(shí)調(diào)用
??????該鉤子在服務(wù)器端渲染期間不被調(diào)用

被包含在 keep-alive 中創(chuàng)建的組件,會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中,如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù),需要在 activated 階段獲取數(shù)據(jù),承擔(dān)原來(lái) created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。

注意: 只有組件被 keep-alive 包裹時(shí),這兩個(gè)生命周期函數(shù)才會(huì)被調(diào)用,如果作為正常組件使用,是不會(huì)被調(diào)用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,這兩個(gè)鉤子函數(shù)依然不會(huì)被調(diào)用!另外,在服務(wù)端渲染時(shí),此鉤子函數(shù)也不會(huì)被調(diào)用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容