Vue中keep-alive的使用

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

image

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

原理
????在 created 函數(shù)調(diào)用時(shí)將需要緩存的 VNode 節(jié)點(diǎn)保存在 this.cache 中/在 render(頁面渲染) 時(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)入頁面的時(shí)候獲取最新的數(shù)據(jù)晾嘶,需要在 activated 階段獲取數(shù)據(jù)妓雾,承擔(dān)原來 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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市泊碑,隨后出現(xiàn)的幾起案子坤按,更是在濱河造成了極大的恐慌,老刑警劉巖馒过,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件臭脓,死亡現(xiàn)場離奇詭異,居然都是意外死亡腹忽,警方通過查閱死者的電腦和手機(jī)来累,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窘奏,“玉大人嘹锁,你說我怎么就攤上這事∽殴” “怎么了兼耀?”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長求冷。 經(jīng)常有香客問我瘤运,道長,這世上最難降的妖魔是什么匠题? 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任拯坟,我火速辦了婚禮,結(jié)果婚禮上韭山,老公的妹妹穿的比我還像新娘郁季。我一直安慰自己冷溃,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開白布梦裂。 她就那樣靜靜地躺著似枕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪年柠。 梳的紋絲不亂的頭發(fā)上凿歼,一...
    開封第一講書人閱讀 51,208評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音冗恨,去河邊找鬼答憔。 笑死,一個(gè)胖子當(dāng)著我的面吹牛掀抹,可吹牛的內(nèi)容都是我干的虐拓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼傲武,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼蓉驹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起揪利,我...
    開封第一講書人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤戒幔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后土童,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡工坊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年献汗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片王污。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罢吃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出昭齐,到底是詐尸還是另有隱情尿招,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布阱驾,位于F島的核電站就谜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏里覆。R本人自食惡果不足惜丧荐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喧枷。 院中可真熱鬧虹统,春花似錦弓坞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忧便,卻和暖如春族吻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背茬腿。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來泰國打工呼奢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人切平。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓握础,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悴品。 傳聞我的和親對(duì)象是個(gè)殘疾皇子禀综,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容