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í)例，而不是銷毀它們。和 <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項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過(guò)程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)
本文主要介紹了vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue 項(xiàng)目build錯(cuò)誤異常的解決方法
這篇文章主要介紹了vue build錯(cuò)誤異常的解決方法 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue實(shí)現(xiàn)數(shù)字動(dòng)畫的幾種方案
本文介紹了三種使用Vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)字動(dòng)畫的方案：使用Vue的響應(yīng)式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過(guò)Vue的動(dòng)畫API和CSS動(dòng)畫效果為數(shù)字增加過(guò)渡效果,以及使用更高效的`requestAnimationFrame`來(lái)提供更加流暢的動(dòng)畫表現(xiàn),每種方案都詳細(xì)說(shuō)明了原理、實(shí)現(xiàn)步驟和代碼示例2025-02-02
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式
這篇文章主要介紹了vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
Vue使用Vuex一步步封裝并使用store全過(guò)程
這篇文章主要介紹了Vue使用Vuex一步步封裝并使用store全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01