vue中keep-alive的用法及問(wèn)題描述
1.keep-alive的作用以及好處
在做電商有關(guān)的項(xiàng)目中，當(dāng)我們第一次進(jìn)入列表頁(yè)需要請(qǐng)求一下數(shù)據(jù)，當(dāng)我從列表頁(yè)進(jìn)入詳情頁(yè)，詳情頁(yè)不緩存也需要請(qǐng)求下數(shù)據(jù)，然后返回列表頁(yè)，這時(shí)候我們使用keep-alive來(lái)緩存組件，防止二次渲染，這樣會(huì)大大的節(jié)省性能。
2.keep-alive的基本用法
在app.vue中
<!-- 緩存所有的頁(yè)面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
需要緩存的組件內(nèi)容直接在router中添加：
meta: {
keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存
}
3.keep-alive的生命周期
當(dāng)引入keep-alive的時(shí)候，頁(yè)面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。
下面看下vue中 keep-alive 的使用問(wèn)題及解決方案
問(wèn)題描述
在業(yè)務(wù)開(kāi)發(fā)中，會(huì)有路由跳轉(zhuǎn)但是返回需要保留數(shù)據(jù)的場(chǎng)景；vue 中提供了 keep-alive 來(lái)處理
解決方案
返回dom不讓其重新刷新，在vue-view外面包一層, 當(dāng)引入keep-alive的時(shí)候，頁(yè)面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。
事件掛載的方法等，只執(zhí)行一次的放在 mounted 中；組件每次進(jìn)去執(zhí)行的方法放在 activated 中；
可以將 是否包裹 keep-alive 通過(guò)參數(shù)配置；
<keep-alive>
<router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>
//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 這個(gè)路由則顯示在上面標(biāo)簽；
//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 這個(gè)路由則顯示在下面標(biāo)簽；
總結(jié)
以上所述是小編給大家介紹的vue中keep-alive的用法及問(wèn)題描述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決Vue中使用Echarts出現(xiàn)There?is?a?chart?instance?already?ini
使用echarts的時(shí)候，多次加載會(huì)出現(xiàn)There?is?a?chart?instance?already?initialized?on?the?dom.這個(gè)黃色警告，此警告信息不影響echarts正常加載，但是有bug得解決，本文就帶大家解決這個(gè)問(wèn)題，感興趣的同學(xué)可以參考閱讀2023-06-06
Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開(kāi)發(fā)前后端分離項(xiàng)目時(shí),前端打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法,文中通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue實(shí)現(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vuex管理狀態(tài) 刷新頁(yè)面保持不被清空的解決方案
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁(yè)面保持不被清空的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了el-table表格排序(多列排序和遠(yuǎn)程排序)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue如何添加jest測(cè)試問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案
點(diǎn)擊左側(cè)的菜單可以切換不同的看板,有些看板頁(yè)面中的報(bào)表比較多,用戶多次切換后頁(yè)面的內(nèi)存占用可以上升為GB級(jí),嚴(yán)重時(shí)導(dǎo)致頁(yè)面內(nèi)存溢出,使得頁(yè)面崩潰,極大影響了用戶體驗(yàn),本文給大家介紹Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案,感興趣的朋友一起看看吧2024-02-02