關于Vue中keep-alive的作用及使用方法
更新時間：2023年04月23日 10:55:06 作者：前端-阿輝
keep-alive是Vue的內(nèi)置組件，當它包裹動態(tài)組件時，會緩存不活動的組件實例，該組件將不會銷毀，這篇文章主要介紹了關于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下
一、概念：
keep-alive是Vue的內(nèi)置組件，當它包裹動態(tài)組件時，會緩存不活動的組件實例，該組件將不會銷毀。
二、作用：
用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗。
三、屬性
- include:字符串或正則表達式。只有匹配的組件會被緩存。
- exclude:字符串或正則表達式。任何匹配的組件都不會被緩存。
四、使用場景
比如：有一個列表頁面和一個詳情頁面，那么用戶可能會經(jīng)常執(zhí)行打開詳情 => 返回列表 => 打開詳情，那么就可以對列表組件使用進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是重新渲染頁面，從而節(jié)省內(nèi)存開銷。
五、使用方式:
5.1. 在App.vue中使用keep-alive組件，來緩存所有頁面
<div id="app">
<keep-alive>
<header-bar></header-bar>
<div class="container">
<menu></menu>
<Main />
</div>
<footer-bar></footer-bar>
</keep-alive>
</div>5.2. 按條件緩存，使用include，exclude判斷是否緩存
5.2.1. 將緩存 name 為 keep的組件，如果有多個，可用逗號分
<keep-alive include='keep'> <router-view/> </keep-alive>
5.2.2. 將不緩存 name 為 nokeep的組件
<keep-alive exclude='nokeep'> <router-view/> </keep-alive>
5.2.3. 還可使用屬性綁定動態(tài)判斷
<keep-alive :include='includedFun'> <router-view/> </keep-alive>
5.3. 在router目錄下的index.js中，
5.3.1. 使用meta: { keepAlive = true }, 表示需要緩存
const routes = [
{
path: '/',
component: Home
},
{
path:'/ login',
component: Login
},
{
path: '/list',
component: List,
meta: {
isKeep: true
}
},
{
path: '/detail',
component: Detail,
meta:{
isKeep: true
}
}
]5.3.2. 在App.vue中進行判斷
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.isKeep"></router-view>
</keep-alive>
<router-view></router-view>
</div>到此這篇關于關于Vue中keep-alive的作用是什么？怎么使用？的文章就介紹到這了,更多相關Vue中keep-alive使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中實現(xiàn)組件跟隨鼠標位置彈出效果,本文通過圖文示例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
在vue3版本中，引入了一個新的函數(shù)，叫做setup。這篇文章將為大家詳細介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下2022-07-07
vxe-table是一個全功能的Vue表格,滿足絕大部分對Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關于Vxe-Table開發(fā)中各種坑以及避坑的相關資料,需要的朋友可以參考下2022-09-09
VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置(推薦)
這篇文章主要介紹了Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置，本文通過圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家介紹了el-upload大文件切片上傳實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了詳解vue-loader在項目中是如何配置的，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
axios的封裝和api接口的統(tǒng)一管理,其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護,這篇文章主要給大家介紹了關于封裝Axios的相關資料,需要的朋友可以參考下2022-01-01