Vue中keep-alive的使用我總結的有兩種方式應用：

首先簡述一下keep-alive的作用，kee-alive可以緩存不活動的的組件。當組件之間進行相互切換的時候，默認會銷毀，當重新切換回來時又重新初始化。現在有需求切換回來不銷毀組件，保持原來的狀態，此時用keep-alive就可以實現了

我創建了兩個組件，可以相互切換

組件1：

組件2：

第一種方式

在組件1的路由中添加 meta: { keepAlive: true }, 也就是當前路由需要緩存

此時路由設置完畢，keep-alive代碼可以結合v-if進行包裹，如果meta中的keepAlive為true進行緩存，否側不進行緩存，這樣可以更靈活一些。

此時組件被緩存，不會銷毀，所以切換不會重新創建，自然也不會調用create等生命周期函數。不過我們可以用activated與deactivated來獲取當前組件是否處于活動狀態（類似鉤子函數的用法）。

第二種方式

在keep-alive上有兩個屬性：

通過include設置

此時，也可以達到緩存keepAlive組件的目的。

以上是我初步總結的keep-alive的實現用法，不正之處煩請諸位指正。

到此這篇關于Vue中keep-alive的兩種應用方式的文章就介紹到這了,更多相關Vue keep-alive內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！