詳解Vue中keep-alive的使用
前言
keep-alive 是 Vue 的內(nèi)置組件,當它包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。例如:在開發(fā)中經(jīng)常有從列表跳到詳情頁,然后返回詳情頁的時候需要緩存列表頁的狀態(tài)(比如滾動位置信息),這個時候就需要保存狀態(tài),要緩存狀態(tài)。在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復渲染DOM,減少加載時間及性能消耗,提高用戶體驗性。使用方式為
<keep-alive> ? ? <component /> </keep-alive>
這里的component會被緩存。
1、概念:
keep-alive是Vue的內(nèi)置組件,當它包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀。
2、作用:
用來緩存組件,避免多次加載相同的組件,減少性能消耗,提高用戶體驗。
3、使用方式:
方式一:在App.vue中使用keep-alive標簽,表示緩存所有頁面
<div id="app"> <keep-alive> <tar-bar></tar-bar> <div class="container"> <left-menu></left-menu> <Main /> </div> </keep-alive> </div>
方式二:按條件緩存,使用include,exclude判斷是否緩存
// 1. 將緩存 name 為 cc 的組件,如果有多個,可用逗號分 <keep-alive include='cc'> <router-view/> </keep-alive> // 2. 將不緩存 name 為 cc 的組件 <keep-alive exclude='cc'> <router-view/> </keep-alive> // 3. 還可使用屬性綁定動態(tài)判斷 <keep-alive :include='includedComs'> <router-view/> </keep-alive>
方式三:在router目錄下的index.js中,
第一步:使用meta:{keepAlive = true },表示需要緩存
const routes = [ { path:'/', component:Home, meta:{ keepalive:true } }, { path:'/login', component:Login }, { path:'/edit', component:Edit, meta:{ istoken: true } }, { path:'/home', component:Home, meta:{ keepalive:true } } ]
- 第二步:在App.vue中進行判斷
<div id="app"> <!--keep-alive 表示頁面不會被銷毀,即保持頁面狀態(tài)--> <keep-alive> <router-view v-if="$route.meta.keepalive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepalive"></router-view> </div>
到此這篇關(guān)于詳解Vue中keep-alive的使用的文章就介紹到這了,更多相關(guān)Vue keep-alive使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實現(xiàn)方法
這篇文章主要介紹了vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解
在日常的工作中,有時候會碰到需要將某個網(wǎng)址網(wǎng)頁保存成為pdf的情況,這篇文章主要介紹了用Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口
這篇文章主要介紹了vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04完美解決vue 項目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09