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