快捷導(dǎo)航

vue的keep-alive用法技巧

更新時(shí)間：2019年08月15日 08:34:54 作者：尋易之客

在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實(shí)例代碼，需要的朋友們學(xué)習(xí)下。

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM

<keep-alive> 包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive>是一個(gè)抽象組件：它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。

方法1

include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存。

exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存。

exclude優(yōu)先級大于include

<keep-alive include="a,b">
 <!-- 將緩存name為a或者b的組件，結(jié)合動態(tài)組件使用 -->
 <component :is="view"></component>
</keep-alive>

方法2 （結(jié)合berforeRouteEnter，緩存部分頁面）

緩存的頁面 created 會執(zhí)行只有一次，activated每次都會執(zhí)行， created 里面做第一次 isFirstEnter = true(由于頁面被緩存，所以一直生效)，之后再activated 里面做判斷只有 “不是返回回來的” 和 “第一次進(jìn)來的” 就刷新數(shù)據(jù)，并且要在下面都設(shè)為false, 以免緩存各標(biāo)識不對，在進(jìn)入 “列表頁” 時(shí)，通過router鉤子函數(shù) beforeRouteEnter做判斷，詳情頁過來的設(shè) isBack 為true,即不刷新頁面

以上就是全部相關(guān)知識點(diǎn)內(nèi)容，感謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Nuxt.js實(shí)戰(zhàn)和配置詳解
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue分頁組件實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue分頁組件的實(shí)例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式
這篇文章主要介紹了vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue實(shí)現(xiàn)簡單彈窗效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue使用distpicker插件實(shí)現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級三聯(lián)跳動，需要的朋友可以參考下
2023-02-02
Vue.js按鍵修飾符及v-model修飾符示例詳解
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-05-05
vue+node+socket io實(shí)現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實(shí)現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開發(fā)流程，需要的朋友可以參考下
2021-09-09
vue數(shù)據(jù)控制視圖源碼解析
本篇內(nèi)容給大家詳細(xì)分析了關(guān)于vue數(shù)據(jù)控制視圖的源碼以及重點(diǎn)做了注釋，有興趣的朋友參考學(xué)習(xí)下。
2018-03-03