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