一、作用
主要用于保留組件狀態(tài)或避免重新渲染。
二、用法
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實(shí)例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。
當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
三、Props
include
include - 字符串或正則表達(dá)式。只有名稱匹配的組件會被緩存。
exclude
exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會被緩存。
include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個數(shù)組來表示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!-- 逗號分隔字符串 --><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)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。
max
max - 數(shù)字。最多可以緩存多少組件實(shí)例。
一旦這個數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實(shí)例會被銷毀掉。
|
1
2
3
|
<keep-alive :max="10"> <component :is="view"></component></keep-alive> |
以上就是淺析vue中的keep-alive的詳細(xì)內(nèi)容，更多關(guān)于vue中的keep-alive的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/gg-qq/p/13855967.html
