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