一、作用

　　主要用於保留元件狀態或避免重新渲染。

二、用法

　　<keep-alive>包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。

　　<keep-alive>是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。

　　當元件在<keep-alive>內被切換，它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行。

三、Props

include

　　include- 字串或正則表示式。只有名稱匹配的元件會被快取。

exclude

　　exclude- 字串或正則表示式。任何名稱匹配的元件都不會被快取。

　　include和excludeprop 允許元件有條件地快取。二者都可以用逗號分隔字串、正則表示式或一個數組來表示：

<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>

<!-- 正則表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a','b']">
 <component :is="view"></component>
</keep-alive>

　　匹配首先檢查元件自身的name選項，如果name選項不可用，則匹配它的區域性註冊名稱 (父元件components選項的鍵值)。匿名元件不能被匹配。

max

　　max- 數字。最多可以快取多少元件例項。

　　一旦這個數字達到了，在新例項被建立之前，已快取元件中最久沒有被訪問的例項會被銷燬掉。

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

以上就是淺析vue中的keep-alive的詳細內容，更多關於vue中的keep-alive的資料請關注我們其它相關文章！