vue keep-alive中的生命周期解讀
vue keep-alive生命周期
keep-alive是 Vue 提供的一個內(nèi)置組件，用來對組件進行緩存——在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復渲染DOM。
如果為一個組件包裹了 keep-alive，那么它會多出兩個生命周期：deactivated、activated。
同時，beforeDestroy 和 destroyed 就不會再被觸發(fā)了，因為組件不會被真正銷毀。
當引入keep-alive的時候，頁面第一次進入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。
當再次進入（前進或者后退）時，只觸發(fā)activated。
被keep-alive包裹的動態(tài)組件或router-view會緩存不活動的實例，再次被調(diào)用這些被緩存的實例會被再次復用，對于我們的某些不是需要實時更新的頁面來說大大減少了性能上的消耗，不需要再次發(fā)送HTTP請求，但是同樣也存在一個問題就是被keep-alive包裹的組件我們請求獲取的數(shù)據(jù)不會再重新渲染頁面，這也就出現(xiàn)了例如我們使用動態(tài)路由做匹配的話頁面只會保持第一次請求數(shù)據(jù)的渲染結(jié)果，所以需要我們在特定的情況下強制刷新某些組件
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的組件會被緩存，（注意是組件的名字，不是路由的名字）其它組件不會被緩存exclude屬性表示除了name屬性為index的組件不會被緩存，其它組件都會被緩存
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> <!--這里是會被緩存的組件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--這里是不會被緩存的組件-->
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
useRouter?是?Vue?3?Composition?API?中的鉤子（hook）,它只能在?Vue?組件中使用,本文主要來和大家探討一下如何讓他在組件外使用,感興趣的可以了解下2024-11-11
vue引入elementUi后打開頁面報錯Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁面報錯Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
使用Vue3進行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
這篇文章主要介紹了使用Vue3進行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來哦展開內(nèi)容,需要的小伙伴可以參考一下2021-10-10
使用Vue實現(xiàn)網(wǎng)站SEO優(yōu)化的方法示例
在如今這個數(shù)字化和信息化的時代,搜索引擎優(yōu)化（SEO）已經(jīng)成為網(wǎng)站成功的關(guān)鍵因素之一,在使用現(xiàn)代化框架如Vue.js進行開發(fā)時,開發(fā)者通常關(guān)注的是構(gòu)建高效的單頁面應用,本文將介紹如何使用Vue來優(yōu)化網(wǎng)站的SEO,并提供一些示例代碼幫助您實現(xiàn)這些優(yōu)化2024-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue項目部署后提示刷新版本的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了解決vue單頁面應用進入頁面加載所有 js 的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進行傳值，子組件向父組件傳值和非父子組件進行傳值，感興趣的小伙伴們可以參考一下2018-07-07
v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
Vue通過echarts實現(xiàn)數(shù)據(jù)圖表化顯示
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08