vue keep-alive的簡(jiǎn)單總結(jié)
主要用于保留組件狀態(tài)或避免重新渲染。
二、用法<keep-alive> 包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們。
<keep-alive> 是一個(gè)抽象組件:它自身不會(huì)渲染一個(gè) DOM 元素,也不會(huì)出現(xiàn)在組件的父組件鏈中。
當(dāng)組件在 <keep-alive> 內(nèi)被切換,它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。
三、Propsincludeinclude - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。
excludeexclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。
include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示:
<!-- 逗號(hào)分隔字符串 --><keep-alive include='a,b'> <component :is='view'></component></keep-alive><!-- 正則表達(dá)式 (使用 `v-bind`) --><keep-alive :include='/a|b/'> <component :is='view'></component></keep-alive><!-- 數(shù)組 (使用 `v-bind`) --><keep-alive :include='[’a’, ’b’]'> <component :is='view'></component></keep-alive>
匹配首先檢查組件自身的 name 選項(xiàng),如果 name 選項(xiàng)不可用,則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。
maxmax - 數(shù)字。最多可以緩存多少組件實(shí)例。
一旦這個(gè)數(shù)字達(dá)到了,在新實(shí)例被創(chuàng)建之前,已緩存組件中最久沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷毀掉。
<keep-alive :max='10'> <component :is='view'></component></keep-alive>
以上就是淺析vue中的keep-alive的詳細(xì)內(nèi)容,更多關(guān)于vue中的keep-alive的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:

網(wǎng)公網(wǎng)安備