聊聊對Vue中的keep-alive的理解
什么是 keep-alive
在平常開發(fā)中,有部分組件沒有必要多次初始化,這時,我們需要將組件進行持久化,使組件的狀態(tài)維持不變,在下一次展示時,也不會進行重新初始化組件。
也就是說,keepalive
是 Vue
內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染 。也就是所謂的組件緩存
<keep-alive>
是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM。
<keep-alive>
包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。和<transition>
相似,<keep-alive>
是一個抽象組件:它自身不會渲染一個DOM
元素,也不會出現(xiàn)在父組件鏈中。
prop:
- include: 字符串或正則表達式。只有匹配的組件會被緩存。
- exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。
keep-alive的聲明周期執(zhí)行
- 頁面第一次進入,鉤子的觸發(fā)順序
created-> mounted-> activated
,
退出時觸發(fā) deactivated
當再次進入(前進或者后退)時,只觸發(fā) activated
- 事件掛載的方法等,只執(zhí)行一次的放在
mounted
中;組件每次進去執(zhí)行的方法放在activated
中;
基本用法
<!--被keepalive包含的組件會被緩存--> <keep-alive> <component><component /> </keep-alive>
被keepalive
包含的組件不會被再次初始化,也就意味著不會重走生命周期函數(shù)
但是有時候是希望我們緩存的組件可以能夠再次進行渲染,這時 Vue
為我們解決了這個問題
被包含在 keep-alive
中創(chuàng)建的組件,會多出兩個生命周期的鉤子: activated
與 deactivated
:
activated
當keepalive
包含的組件再次渲染的時候觸發(fā)deactivated
當keepalive
包含的組件銷毀的時候觸發(fā)
keepalive
是一個抽象的組件,緩存的組件不會被 mounted
,為此提供activated
和deactivated
鉤子函數(shù)
參數(shù)理解
keepalive
可以接收3個屬性做為參數(shù)進行匹配對應(yīng)的組件進行緩存:
include
包含的組件(可以為字符串,數(shù)組,以及正則表達式,只有匹配的組件會被緩存)exclude
排除的組件(以為字符串,數(shù)組,以及正則表達式,任何匹配的組件都不會被緩存)max
緩存組件的最大值(類型為字符或者數(shù)字,可以控制緩存組件的個數(shù))
注:當使用正則表達式或者數(shù)組時,一定要使用 v-bind
<!-- 將(只)緩存組件name為a或者b的組件, 結(jié)合動態(tài)組件使用 --> <keep-alive include="a,b"> <component></component> </keep-alive> <!-- 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染) --> <keep-alive exclude="c"> <component></component> </keep-alive> <!-- 使用正則表達式,需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 動態(tài)判斷 --> <keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive> <!-- 如果同時使用include,exclude,那么exclude優(yōu)先于include, 下面的例子只緩存a組件 --> <keep-alive include="a,b" exclude="b"> <component></component> </keep-alive> <!-- 如果緩存的組件超過了max設(shè)定的值5,那么將刪除第一個緩存的組件 --> <keep-alive exclude="c" max="5"> <component></component> </keep-alive>
參考 前端vue面試題詳細解答
遇見vue-router 結(jié)合router使用,緩存部分頁面
所有路徑下的視圖組件都會被緩存
<keep-alive> <router-view> <!-- 所有路徑匹配到的視圖組件都會被緩存! --> </router-view> </keep-alive>
如果只想要router-view
里面的某個組件被緩存,怎么辦?
- 使用
include
/exclude
- 使用
meta
屬性
1、用 include
(exclude
例子類似)
缺點:需要知道組件的 name,項目復(fù)雜的時候不是很好的選擇
<keep-alive include="a"> <router-view> <!-- 只有路徑匹配到的 include 為 a 組件會被緩存 --> </router-view> </keep-alive>
2、使用 meta 屬性
優(yōu)點:不需要例舉出需要被緩存組件名稱
使用$route.meta的keepAlive屬性:
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router
中設(shè)置router的元信息meta:
//...router.js export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello, meta: { keepAlive: false // 不需要緩存 } }, { path: '/page1', name: 'Page1', component: Page1, meta: { keepAlive: true // 需要被緩存 } } ] })
【加鹽】使用 router.meta 拓展
需求:
- 默認顯示 A
- B 跳到 A,A 不刷新
- C 跳到 A,A 刷新
實現(xiàn)方式
- 在 A 路由里面設(shè)置 meta 屬性:
{ path: '/', name: 'A', component: A, meta: { keepAlive: true // 需要被緩存 } }
在 B 組件里面設(shè)置 beforeRouteLeave:
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 設(shè)置下一個路由的 meta to.meta.keepAlive = true; // 讓 A 緩存,即不刷新 next(); } };
在 C 組件里面設(shè)置 beforeRouteLeave:
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 設(shè)置下一個路由的 meta to.meta.keepAlive = false; // 讓 A 不緩存,即刷新 next(); } };
這樣便能實現(xiàn) B 回到 A,A 不刷新;而 C 回到 A 則刷新。
防坑指南
1.keep-alive
先匹配被包含組件的 name
字段,如果 name
不可用,則匹配當前組件 components
配置中的注冊名稱。
2.keep-alive
不會在函數(shù)式組件中正常工作,因為它們沒有緩存實例。
3.當匹配條件同時在 include
與 exclude
存在時,以 exclude
優(yōu)先級最高(當前vue 2.4.2 version)。比如:包含于排除同時匹配到了組件A,那組件A不會被緩存。
4.包含在 keep-alive
中,但符合 exclude
,不會調(diào)用 activated
和 deactivated
。
實現(xiàn)前進刷新,后退不刷新
感謝 iceuncle 分享的 《vue實現(xiàn)前進刷新,后退不刷新》。
總結(jié)
路由大法不錯,不需要關(guān)心哪個頁面跳轉(zhuǎn)過來的,只要 router.go(-1) 就能回去,不需要額外參數(shù)。
在非單頁應(yīng)用的時候,keep-alive
并不能有效的緩存了= =
keep-alive生命周期鉤子函數(shù):activated、deactivated
使用<keep-alive>
會將數(shù)據(jù)保留在內(nèi)存中,如果要在每次進入頁面的時候獲取最新的數(shù)據(jù),需要在activated
階段獲取數(shù)據(jù),承擔原來created
鉤子中獲取數(shù)據(jù)的任務(wù)。
附錄
生命周期函數(shù):就是vue在某個時間段會自動執(zhí)行的函數(shù)
beforeCreate(){}
在執(zhí)行的時候,data還有methods都沒有被初始化
created(){}
data還有methods都被初始化好了,如果要調(diào)用 methods
方法或者操作 data
里面的數(shù)據(jù),最早只能在 created
里面進行操作。
beforeMount(){}
表示模板已經(jīng)在內(nèi)存中編輯完成了,但是尚未渲染到模板頁面中。即頁面中的元素,沒有被真正的替換過來,只是之前寫的一些模板字符串。
mounted(){}
表示內(nèi)存中模板已經(jīng)真實的掛載到頁面中去了,用戶可以看到渲染好的界面了
注意這是一個生命周期函數(shù)的最后一個函數(shù)了,執(zhí)行完這個函數(shù)表示 整個vue實例已經(jīng)初始化完成了,組件脫離了創(chuàng)建階段,進入運行階段。
下面是運行期間的兩個生命周期函數(shù)的鉤子:
beforeUpdate(){}
表示我們的界面還沒更新 但是data里面的數(shù)據(jù)是最新的。即頁面尚未和最新的data里面的數(shù)據(jù)保持同步。
updated(){}
表示頁面和data里面的數(shù)據(jù)已經(jīng)保持同步了 都是最新的。
beforeDestory(){}
當執(zhí)行這個生命周期鉤子的時候 vue的實例從運行階段進入銷毀階段 此時實例身上的data 還有 methods處于可用的狀態(tài)。
destoryed(){}
表示組件已經(jīng)完全被銷毀了 組件中所有的實例方法都是不能用了
到此這篇關(guān)于說說你對Vue的keep-alive的理解的文章就介紹到這了,更多相關(guān)Vue keep-alive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于element-ui?單選框默認值不選中的解決
這篇文章主要介紹了關(guān)于element-ui?單選框默認值不選中的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue+elementUI多表單同時提交及表單校驗最新解決方案
假設(shè)有一個頁面,需要分三步填寫三個表單,且每個表單位于獨立的組件中,然后最后保存同時提交,如何進行表單必填項校驗,下面小編給大家介紹vue+elementUI多表單同時提交及表單校驗最新解決方案,感興趣的朋友一起看看吧2024-03-03vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因為版本問題在創(chuàng)建項目時出現(xiàn)的各種報錯問題,這次在運行時出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下2023-04-04