Vue中keep-alive的兩種應(yīng)用方式
Vue中keep-alive的使用我總結(jié)的有兩種方式應(yīng)用：
首先簡述一下keep-alive的作用，kee-alive可以緩存不活動的的組件。當組件之間進行相互切換的時候，默認會銷毀，當重新切換回來時又重新初始化。現(xiàn)在有需求切換回來不銷毀組件，保持原來的狀態(tài)，此時用keep-alive就可以實現(xiàn)了
我創(chuàng)建了兩個組件，可以相互切換
組件1：
組件2：
第一種方式
在組件1的路由中添加 meta: { keepAlive: true }, 也就是當前路由需要緩存
此時路由設(shè)置完畢，keep-alive代碼可以結(jié)合v-if進行包裹，如果meta中的keepAlive為true進行緩存，否側(cè)不進行緩存，這樣可以更靈活一些。
此時組件被緩存，不會銷毀，所以切換不會重新創(chuàng)建，自然也不會調(diào)用create等生命周期函數(shù)。不過我們可以用activated與deactivated來獲取當前組件是否處于活動狀態(tài)（類似鉤子函數(shù)的用法）。
第二種方式
在keep-alive上有兩個屬性：
通過include設(shè)置
此時，也可以達到緩存keepAlive組件的目的。
以上是我初步總結(jié)的keep-alive的實現(xiàn)用法，不正之處煩請諸位指正。
到此這篇關(guān)于Vue中keep-alive的兩種應(yīng)用方式的文章就介紹到這了,更多相關(guān)Vue keep-alive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
許多朋友想要材料上傳之后點擊預(yù)覽實現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實現(xiàn)pdf預(yù)覽功能,文中有實現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
這篇文章主要為大家詳細介紹了pinia，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vuex中五大屬性和使用說明(包括輔助函數(shù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
element自定義表單驗證上傳身份證正反面的實現(xiàn)
表單驗證在很多地方都可以用的到，本文主要介紹了element自定義表單驗證上傳身份證正反面的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了若依VUE前端打包到測試環(huán)境,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
在vue項目中(本地)使用iconfont字體圖標的三種方式總結(jié)
這篇文章主要介紹了在vue項目中(本地)使用iconfont字體圖標的三種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue3.x最小原型系統(tǒng)講解。既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來進行項目的初始化，下文舉例說明,需要的朋友可以參考一下2022-02-02