vue之keepAlive使用案例詳解
在開發(fā)中經(jīng)常有從列表跳到詳情頁,然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)(比如滾動(dòng)位置信息),這個(gè)時(shí)候就需要保存狀態(tài),要緩存狀態(tài);vue里提供了keep-alive組件用來緩存狀態(tài)。
可以用以下幾種方案解決問題;
一、利用meta標(biāo)簽
1、首先在路由中的meta標(biāo)簽中記錄keepAlive的屬性為true
path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'), meta: { title: '雷石淘券券', keepAlive: true } },
2、在創(chuàng)建router實(shí)例的時(shí)候加上scrollBehavior方法
export default new Router({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } })
3、在需要緩存的router-view組件上包裹keep-alive組件
<keep-alive> <router-view v-if='$route.meta.keepAlive'></router-view> </keep-alive> <router-view v-if='!$route.meta.keepAlive'></router-view>
4、由于有些情況下需要緩存有些情況下不需要緩存,可以在緩存的組件里的路由鉤子函數(shù)中做判斷
beforeRouteLeave (to, from, next) { this.loading = true if (to.path === '/goods_detail') { from.meta.keepAlive = true } else { from.meta.keepAlive = false // this.$destroy() } next() },
可以支持組件的緩存,但是這種方法有bug,首先第一次打開頁面的時(shí)候并不緩存,即第一次從列表頁跳到詳情頁,再回來并沒有緩存,后面在進(jìn)入詳情頁才會(huì)被緩存
并且只會(huì)緩存第一次進(jìn)入的狀態(tài),不會(huì)重新請(qǐng)求數(shù)據(jù),如果當(dāng)頁面A選中一個(gè)分類跳到B頁面,再從B列表頁面跳往詳情頁,此時(shí)會(huì)緩存這個(gè)狀態(tài),并且以后再從A頁面的其他分類跳到B頁面都不會(huì)重新被緩存,以至于每次從詳情頁返回B頁面都會(huì)跳第一次緩存的狀態(tài);當(dāng)你的項(xiàng)目只有一種狀態(tài)需要緩存,可以考慮使用這種方法
二 使用include、exclude屬性和beforeRouteEnter鉤子函數(shù)
首先介紹一下include和exclude vue文檔https://cn.vuejs.org/v2/api/#keep-alive
是在vue2.0以后新增的屬性
include是需要緩存的組件;
exclude是除了某些組件都緩存;
include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示:
<keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正則表達(dá)式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 數(shù)組 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先檢查組件自身的 name 選項(xiàng),如果 name 選項(xiàng)不可用,則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。
max只在2.5.0新增,最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了,在新實(shí)例被創(chuàng)建之前,已緩存組件中最久沒有被訪問的實(shí)例會(huì)被銷毀掉。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
activated 與 deactivated。
簡(jiǎn)單介紹一下在被keep-alive包含的組件/路由中,會(huì)多出兩個(gè)生命周期的鉤子:activated 與 deactivated。
文檔:在 2.2.0 及其更高版本中,activated 和 deactivated 將會(huì)在 樹內(nèi)的所有嵌套組件中觸發(fā)。
activated在組件第一次渲染時(shí)會(huì)被調(diào)用,之后在每次緩存組件被激活時(shí)調(diào)用。
activated調(diào)用時(shí)機(jī):
第一次進(jìn)入緩存路由/組件,在mounted后面,beforeRouteEnter守衛(wèi)傳給 next 的回調(diào)函數(shù)之前調(diào)用:
beforeMount=> 如果你是從別的路由/組件進(jìn)來(組件銷毀destroyed/或離開緩存deactivated)=>mounted=> activated 進(jìn)入緩存組件 => 執(zhí)行 beforeRouteEnter回調(diào)
因?yàn)榻M件被緩存了,再次進(jìn)入緩存路由/組件時(shí),不會(huì)觸發(fā)這些鉤子:// beforeCreate created beforeMount mounted 都不會(huì)觸發(fā)。
deactivated:組件被停用(離開路由)時(shí)調(diào)用
使用了keep-alive就不會(huì)調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀),因?yàn)榻M件沒被銷毀,被緩存起來了。
這個(gè)鉤子可以看作beforeDestroy的替代,如果你緩存了組件,要在組件銷毀的的時(shí)候做一些事情,你可以放在這個(gè)鉤子里。
如果你離開了路由,會(huì)依次觸發(fā):
組件內(nèi)的離開當(dāng)前路由鉤子beforeRouteLeave => 路由前置守衛(wèi) beforeEach =>全局后置鉤子afterEach => deactivated 離開緩存組件 => activated 進(jìn)入緩存組件(如果你進(jìn)入的也是緩存路由
項(xiàng)目中緩存使用方法:
1、在創(chuàng)建的router對(duì)象上加scrollBehavior方法,同上;
2、將需要緩存的組件加在include屬性里
<keep-alive :include="['home','classify','search']"> <router-view></router-view> </keep-alive>
3、在beforeRouteEnter的next回掉函數(shù)里,對(duì)返回A頁面不需要緩存的的情況初始化,即將本來需要寫在created里的東西寫在這里;注意一定要將所有的需要初始化的數(shù)據(jù)要寫一遍,不然會(huì)有bug;所以不太推薦
beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實(shí)例 if (from.path !== '/goods_detail') { // 一定是從A進(jìn)到B頁面才刷新 vm.titleText = vm.$route.query.name vm.categoryUpper = vm.$route.query.categoryUpper vm.goods = [] vm.page = 1 vm.catsIndex = 0 vm.is_search = false vm.getCats2()// 是本來寫在created里面的各種 } }) }
三、使用include、exclude屬性和beforeRouteLeave鉤子函數(shù)和vuex (推薦使用)
第三種方法和第二種相似,不同的地方在于,將需要緩存的組件保存到全局變量,可以在路由的鉤子函數(shù)里靈活的控制哪些組件需要緩存,那些不需要緩存;跟第二種方法相比,不需要每次再重新初始化數(shù)據(jù),但是需要在vuex中保存數(shù)據(jù);
上代碼
1、在創(chuàng)建的router對(duì)象上加scrollBehavior方法,同上;
2、將需要緩存的組件加在include屬性里
<keep-alive :include="catch_components"> <router-view></router-view> </keep-alive>
3、在store里加入需要緩存的的組件的變量名,和相應(yīng)的方法;
export default new Vuex.Store({ state: { catch_components: [] }, mutations:{ GET_CATCHE_COMPONENTS (state, data) { state.catch_components = data } } })
4、在beforeRouteLeave鉤子函數(shù)里控制需要緩存的組件
beforeRouteLeave (to, from, next) { //要在離開該組件的時(shí)候控制需要緩存的組件,否則將出現(xiàn)第一次不緩存的情況 this.busy = true if (to.path === '/goods_detail') { // 去往詳情頁的時(shí)候需要緩存組件,其他情況下不需要緩存 this.$store.commit('GET_CATCHE_COMPONENTS', ['home']) } else { this.$store.commit('GET_CATCHE_COMPONENTS', []) } next() },
另外,在我們的項(xiàng)目中遇到路由相同但參數(shù)不同的情況組件被復(fù)用,不更新的問題,vue官方給出了 響應(yīng)路由參數(shù)變化
watch: { '$route' (to, from) { document.title = this.$route.query.name this.getDefault() //根據(jù)參數(shù)數(shù)據(jù)響應(yīng) } },
到此這篇關(guān)于vue之keepAlive使用案例詳解的文章就介紹到這了,更多相關(guān)vue之keepAlive使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺(tái)管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-0117個(gè)vue常用的數(shù)組方法總結(jié)與實(shí)例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括:VUE數(shù)組轉(zhuǎn)換字符串,VUE數(shù)組遍歷,VUE數(shù)組過濾,VUE數(shù)組查詢,VUE數(shù)組排序等功能,需要的朋友可以參考下2022-12-12vue-cli3項(xiàng)目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli3項(xiàng)目配置eslint代碼規(guī)范的完整步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09vue數(shù)據(jù)雙向綁定原理解析(get & set)
這篇文章主要為大家詳細(xì)解析了vue.js數(shù)據(jù)雙向綁定原理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的方法
現(xiàn)在需要做一個(gè)時(shí)間選擇器,可以根據(jù)小時(shí)(同時(shí)選天和小時(shí))和天?和月,節(jié)假日等類型控制日歷的選擇樣式,下面這篇文章主要給大家介紹了關(guān)于elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的相關(guān)資料,需要的朋友可以參考下2023-04-04