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的組件，結合動態(tài)組件使用 --> <component :is="view"></component> </keep-alive>
方法2 （結合berforeRouteEnter，緩存部分頁面）
緩存的頁面 created 會執(zhí)行只有一次，activated每次都會執(zhí)行 ， created 里面做 第一次 isFirstEnter = true(由于頁面被緩存，所以一直生效)，之后再activated 里面做判斷 只有 “不是返回回來的” 和 “第一次進來的” 就刷新數(shù)據(jù)， 并且要在下面 都設為false, 以免緩存各標識不對，在進入 “列表頁” 時，通過router鉤子函數(shù) beforeRouteEnter做判斷，詳情頁過來的設 isBack 為true,即不刷新頁面
以上就是全部相關知識點內(nèi)容，感謝大家對腳本之家的支持。
相關文章
這篇文章主要為大家詳細介紹了vue配置nprogress實現(xiàn)頁面頂部進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Nuxt.js實戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了Vue分頁組件的實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)學生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue+el-table點擊表頭實現(xiàn)改變其當前樣式
這篇文章主要介紹了vue+el-table點擊表頭實現(xiàn)改變其當前樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關用法概覽及開發(fā)流程，需要的朋友可以參考下2021-09-09
本篇內(nèi)容給大家詳細分析了關于vue數(shù)據(jù)控制視圖的源碼以及重點做了注釋，有興趣的朋友參考學習下。2018-03-03