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