vue keep-alive的簡單總結

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

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

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

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

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。

exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。

include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示：

<!-- 逗號分隔字符串 --><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 - 數字。最多可以緩存多少組件實例。

一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

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

以上就是淺析vue中的keep-alive的詳細內容，更多關于vue中的keep-alive的資料請關注好吧啦網其它相關文章！