vue的keep-alive用法技巧
更新時間：2019年08月15日 08:34:54 作者：尋易之客
在本篇文章里小編給大家整理的是關于vue的keep-alive用法技巧以及實例代碼，需要的朋友們學習下。
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復渲染DOM
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive>是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中。
方法1
include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。
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 里面做判斷 只有 “不是返回回來的” 和 “第一次進來的” 就刷新數(shù)據(jù)， 并且要在下面 都設為false, 以免緩存各標識不對，在進入 “列表頁” 時，通過router鉤子函數(shù) beforeRouteEnter做判斷，詳情頁過來的設 isBack 為true,即不刷新頁面
以上就是全部相關知識點內(nèi)容，感謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了詳解vue項目接入微信JSSDK的坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
element-ui中導航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過創(chuàng)建一個簡單的npm包,本文詳細闡述了從創(chuàng)建到發(fā)布的整個過程,具有一定的參考價值,感興趣的可以了解一下2023-08-08
vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動
本文主要介紹了vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了vue build錯誤異常的解決方法 ，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本文介紹了三種使用Vue實現(xiàn)動態(tài)數(shù)字動畫的方案：使用Vue的響應式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過Vue的動畫API和CSS動畫效果為數(shù)字增加過渡效果,以及使用更高效的`requestAnimationFrame`來提供更加流暢的動畫表現(xiàn),每種方案都詳細說明了原理、實現(xiàn)步驟和代碼示例2025-02-02
在vue3版本中，引入了一個新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
vue關于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式
這篇文章主要介紹了vue關于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了淺談Vue路由快照實現(xiàn)思路及其問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue使用Vuex一步步封裝并使用store全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01