Vue項目中keepAlive的使用說明(超級實用版)
keepAlive的使用
在開發(fā)的過程中如果碰到經(jīng)常瀏覽需要緩存的頁面，而且頁面很長需要記錄滾動的位置這時就需要用到keepAlive。
一共有三個步驟
1、首先在路由中的mate屬性中記錄keepAlive，如果需要緩存則置為true。
path:'/index',
name:''index',
component:()=>import('../../index/index'),
meta:{keepAlive:true}2、在創(chuàng)建router實例的時候加上scrollBehavior方法（keepAlive才會生效）。
let router=new Router({
? ? mode:"hash",//1、hash哈希：有#號。2、history歷史：沒有#號
? ? base:process.env.BASE_URL, //自動獲取根目錄路徑
? ? scrollBehavior:(to,from,position)=>{
? ? ? ? if(position){
? ? ? ? ? ? return position
? ? ? ? }else{
? ? ? ? ? ? return {x:0,y:0}
? ? ? ? }
? ? },3、需要緩存的router-view包上keep-alive（要有兩個router-view，一個是緩存的時候顯示，一個是不緩存的時候顯示，有的時候不需要緩存）。
<keep-alive> ?? ?<router-view v-if="$router.meta.keepAlive"></router-view> </keep-alive> ?? ?<router-view v-if="!$router.meta.keepAlive"></router-view>
注意
在keep-alive中的組件會有兩個生命周期的鉤子函數(shù)，activated和deactivated，其中activated是在組件第一次渲染時會被調(diào)用，而且之后每次緩存組件被激活都會被調(diào)用。所以一般使用時需要里面的代碼和created函數(shù)中的代碼一樣即可。
keepAlive的注意事項
問題描述
今天在測試提到了一個bug，當(dāng)重復(fù)進(jìn)入相同的組建的時候，mounted和created內(nèi)的方法不觸發(fā)，導(dǎo)致頁面展示不一樣
原因
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中。（所以不會觸發(fā)mounted和created事件鉤子）
當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated （激活）和 deactivated （不激活）這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
include and exclude
include （緩存的文件）和 exclude（不換存文件） 屬性允許組件有條件地緩存。
<!-- 逗號分隔字符串 --> <keep-alive include="a,b"> ? <component :is="view"></component> </keep-alive> ? <!-- 正則表達(dá)式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> ? <component :is="view"></component> </keep-alive> ? <!-- 數(shù)組 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> ? <component :is="view"></component> </keep-alive>
max
最多可以緩存多少組件實例。
<keep-alive :max="10"> ? <component :is="view"></component> </keep-alive>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹，通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進(jìn)行掃碼識別功能，對識別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理，對vue瀏覽器掃碼功能的實現(xiàn)代碼感興趣的朋友一起看看吧2021-10-10
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了keep?alive用法及原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在使用Vue3時,有時頁面修改后會出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時頁面空白問題解決辦法,文中介紹的步驟可以有效解決頁面空白問題,需要的朋友可以參考下2024-09-09
vue自適應(yīng)布局postcss-px2rem詳解
這篇文章主要介紹了vue自適應(yīng)布局（postcss-px2rem）的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-05-05
Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了VUE中CSS樣式穿透問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11