vue keep-alive中的生命周期解讀
vue keep-alive生命周期
keep-alive是 Vue 提供的一個(gè)內(nèi)置組件，用來對(duì)組件進(jìn)行緩存——在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
如果為一個(gè)組件包裹了 keep-alive，那么它會(huì)多出兩個(gè)生命周期：deactivated、activated。
同時(shí)，beforeDestroy 和 destroyed 就不會(huì)再被觸發(fā)了，因?yàn)榻M件不會(huì)被真正銷毀。
當(dāng)引入keep-alive的時(shí)候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。
當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。
被keep-alive包裹的動(dòng)態(tài)組件或router-view會(huì)緩存不活動(dòng)的實(shí)例，再次被調(diào)用這些被緩存的實(shí)例會(huì)被再次復(fù)用，對(duì)于我們的某些不是需要實(shí)時(shí)更新的頁面來說大大減少了性能上的消耗，不需要再次發(fā)送HTTP請(qǐng)求，但是同樣也存在一個(gè)問題就是被keep-alive包裹的組件我們請(qǐng)求獲取的數(shù)據(jù)不會(huì)再重新渲染頁面，這也就出現(xiàn)了例如我們使用動(dòng)態(tài)路由做匹配的話頁面只會(huì)保持第一次請(qǐng)求數(shù)據(jù)的渲染結(jié)果，所以需要我們在特定的情況下強(qiáng)制刷新某些組件
1.利用include、exclude屬性
<keep-alive include="orderList">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="index">
<router-view></router-view>
</keep-alive>include屬性表示只有name屬性為orderList的組件會(huì)被緩存，（注意是組件的名字，不是路由的名字）其它組件不會(huì)被緩存exclude屬性表示除了name屬性為index的組件不會(huì)被緩存，其它組件都會(huì)被緩存
2.利用meta屬性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被緩存的組件
},
{
path:'/orderList',
name:'orderList',
components:Book,
meta:{
keepAlive:false //不需要被緩存的組件
}
]<keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> <!--這里是會(huì)被緩存的組件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--這里是不會(huì)被緩存的組件-->
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue后臺(tái)項(xiàng)目如何使用router.addRoutes動(dòng)態(tài)加入路由的思路
這篇文章主要介紹了vue后臺(tái)項(xiàng)目如何使用router.addRoutes動(dòng)態(tài)加入路由的思路，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09
解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue源碼中的檢測方法的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家介紹了vue運(yùn)用之vuex持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Pinia?是一個(gè)基于?Vue?3?的狀態(tài)管理庫，可以更好地支持?TypeScript?和更靈活的狀態(tài)管理方式，本文主要介紹了pinia的使用與持久化處理，需要的可以參考一下2023-07-07
vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決
這篇文章主要介紹了vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue3使用dataV報(bào)錯(cuò)問題的解決方法
這篇文章主要為大家詳細(xì)介紹了Vue3中使用dataV報(bào)錯(cuò)問題的解決方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11