vue的keep-alive用法技巧
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM
<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。和 <transition> 相似，<keep-alive>是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。
方法1
include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。
exclude優(yōu)先級(jí)大于include
<keep-alive include="a,b"> <!-- 將緩存name為a或者b的組件，結(jié)合動(dòng)態(tài)組件使用 --> <component :is="view"></component> </keep-alive>
方法2 （結(jié)合berforeRouteEnter，緩存部分頁(yè)面）
緩存的頁(yè)面 created 會(huì)執(zhí)行只有一次，activated每次都會(huì)執(zhí)行 ， created 里面做 第一次 isFirstEnter = true(由于頁(yè)面被緩存，所以一直生效)，之后再activated 里面做判斷 只有 “不是返回回來(lái)的” 和 “第一次進(jìn)來(lái)的” 就刷新數(shù)據(jù)， 并且要在下面 都設(shè)為false, 以免緩存各標(biāo)識(shí)不對(duì)，在進(jìn)入 “列表頁(yè)” 時(shí)，通過(guò)router鉤子函數(shù) beforeRouteEnter做判斷，詳情頁(yè)過(guò)來(lái)的設(shè) isBack 為true,即不刷新頁(yè)面
以上就是全部相關(guān)知識(shí)點(diǎn)內(nèi)容，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)和配置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)組件的實(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)前樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過(guò)JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過(guò)代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線(xiàn)全流程
這篇文章主要介紹了vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線(xiàn)全流程,本文給大家提到了socket.io相關(guān)用法概覽及開(kāi)發(fā)流程，需要的朋友可以參考下2021-09-09
本篇內(nèi)容給大家詳細(xì)分析了關(guān)于vue數(shù)據(jù)控制視圖的源碼以及重點(diǎn)做了注釋?zhuān)信d趣的朋友參考學(xué)習(xí)下。2018-03-03