Vue中keep-alive的兩種應(yīng)用方式
Vue中keep-alive的使用我總結(jié)的有兩種方式應(yīng)用：
首先簡(jiǎn)述一下keep-alive的作用，kee-alive可以緩存不活動(dòng)的的組件。當(dāng)組件之間進(jìn)行相互切換的時(shí)候，默認(rèn)會(huì)銷(xiāo)毀，當(dāng)重新切換回來(lái)時(shí)又重新初始化。現(xiàn)在有需求切換回來(lái)不銷(xiāo)毀組件，保持原來(lái)的狀態(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í)組件被緩存，不會(huì)銷(xiāo)毀，所以切換不會(huì)重新創(chuàng)建，自然也不會(huì)調(diào)用create等生命周期函數(shù)。不過(guò)我們可以用activated與deactivated來(lái)獲取當(dāng)前組件是否處于活動(dòng)狀態(tài)（類(lèi)似鉤子函數(shù)的用法）。
第二種方式
在keep-alive上有兩個(gè)屬性：
通過(guò)include設(shè)置
此時(shí)，也可以達(dá)到緩存keepAlive組件的目的。
以上是我初步總結(jié)的keep-alive的實(shí)現(xiàn)用法，不正之處煩請(qǐng)諸位指正。
到此這篇關(guān)于Vue中keep-alive的兩種應(yīng)用方式的文章就介紹到這了,更多相關(guān)Vue keep-alive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
當(dāng)我們談?wù)摶蛴懻撛?Vue?中創(chuàng)建用戶(hù)界面組件時(shí),經(jīng)常會(huì)提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應(yīng)用這些組件時(shí)面臨的問(wèn)題,以及為什么必須盡可能克服這些問(wèn)題,需要的朋友可以參考下2023-10-10
在Vue中實(shí)現(xiàn)網(wǎng)頁(yè)截圖與截屏功能詳解
在Web開(kāi)發(fā)中，有時(shí)候需要對(duì)網(wǎng)頁(yè)進(jìn)行截圖或截屏，Vue作為一個(gè)流行的JavaScript框架，提供了一些工具和庫(kù)，可以方便地實(shí)現(xiàn)網(wǎng)頁(yè)截圖和截屏功能，本文將介紹如何在Vue中進(jìn)行網(wǎng)頁(yè)截圖和截屏,需要的朋友可以參考下2023-06-06
對(duì)于中小型企業(yè),vue應(yīng)用越來(lái)越多,學(xué)習(xí)vue相對(duì)于react的成本要低點(diǎn),入門(mén)相對(duì)簡(jiǎn)單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue data有值,但是頁(yè)面{{}} 取不到值的解決
這篇文章主要介紹了vue data有值,但是頁(yè)面{{}} 取不到值的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue中的作用域CSS和CSS模塊的區(qū)別，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue首頁(yè)加載過(guò)慢的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開(kāi)發(fā)環(huán)境代理方案
這篇文章主要為大家介紹了Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開(kāi)發(fā)環(huán)境代理方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
ant-design-vue動(dòng)態(tài)表格合并案例
這篇文章主要介紹了ant-design-vue動(dòng)態(tài)表格合并案例，文章圍繞主題通過(guò)案例詳解展開(kāi)相關(guān)內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來(lái)具體介紹一下,感興趣的可以了解一下2023-09-09