一、問題觸發(fā)并解決

最近自己在寫vue練習(xí)，內(nèi)容相對(duì)簡單，主要是對(duì)vue進(jìn)行熟悉和相關(guān)問題發(fā)現(xiàn)，查漏補(bǔ)缺。簡單說下練習(xí)的項(xiàng)目內(nèi)容及問題的產(chǎn)生：

練習(xí)使用的vue-cli 2.0腳手架搭建，內(nèi)容就是簡單的仿音樂播放app，功能也相對(duì)簡單，大體就是單頁router切換各個(gè)專輯列表，點(diǎn)擊進(jìn)入專輯內(nèi)容頁面，單擊歌曲名稱可以進(jìn)行播放、暫停、下一曲功能。

簡單的背景介紹完了，說下問題產(chǎn)生的情形：在從整個(gè)歌曲列表頁點(diǎn)擊跳轉(zhuǎn)到單個(gè)專輯列表頁，然后點(diǎn)擊返回按鈕返回歌曲列表頁時(shí)，頁面保存了之前的瀏覽位置，但是接口重新請(qǐng)求了數(shù)據(jù)，因?yàn)楦枨斜眄撚袧L動(dòng)加載效果，所以數(shù)據(jù)獲取在vuex里用了數(shù)組的concat方法，導(dǎo)致返回請(qǐng)求的數(shù)據(jù)重新加載了列表里，而v-for循環(huán)由于key值有了重復(fù)，導(dǎo)致控制臺(tái)報(bào)錯(cuò)；說起來可能比較難懂，上一些基本的代碼部分：

vuex里獲取列表數(shù)據(jù)：
GET_COLLECTION_LIST(state, val) { state.collectionList = state.collectionList.concat(val)}

歌曲列表里created獲取數(shù)據(jù)，mounted監(jiān)聽滾動(dòng)事件滾動(dòng)加載，destroyed取消監(jiān)聽：
created(){ this.collectionListMethod({limit: this.limit, offset: this.offset})},
mounted(){ window.addEventListener('scroll', this.isScrollBot)}
destroyed(){ window.removeEventListener('scroll', this.isScrollBot)}

專輯列表頁返回使用的是 this.$router.go(-1)

有問題就要解決問題，通過查詢了解到keep-alive可以對(duì)數(shù)據(jù)進(jìn)行緩存，路由切換的時(shí)候可以使用緩存不用重新觸發(fā)接口請(qǐng)求，貌似可以很完美解決問題，實(shí)踐出真知，在代碼里添加：

首先在歌曲列表路由里添加meta:{keepAlive: true}為后面的router-view是否需要緩存提供標(biāo)識(shí)
{ path: '/songLis', component: SongLis, meta: { keepAlive: true }}
然后在router-view外層添加keep-alive，并根據(jù)meta參數(shù)判斷是否所有路由都需要緩存
<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

添加完畢，回到頁面看效果！可喜可賀的是控制臺(tái)不報(bào)錯(cuò)了，說明keep-alive起作用了，撒花慶祝~~~ 但是事情并沒有那么簡單，當(dāng)我們從專輯列表切到其他路由，滾動(dòng)鼠標(biāo)會(huì)發(fā)現(xiàn)滾動(dòng)加載的監(jiān)聽事件沒有取消，組件destroyed的時(shí)候明明取消監(jiān)聽了啊！而且再切回到專輯列表頁的時(shí)候，滾動(dòng)加載反而不執(zhí)行了，表示一臉懵~

經(jīng)過查看vue文檔，發(fā)現(xiàn)文檔有這么一句話：

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。

也就是說使用keep-alive的組件不會(huì)觸發(fā)destroyed鉤子方法，這就是取消監(jiān)聽失敗的原因。根據(jù)文檔介紹，keep-alive切換時(shí)，會(huì)觸發(fā)自己的activeted和deactiveted兩個(gè)鉤子函數(shù)，可以理解為vue的created和destroyed兩個(gè)鉤子，因此需要修改代碼，在deactivated時(shí)候取消監(jiān)聽，同時(shí)在activated的時(shí)候恢復(fù)監(jiān)聽，否則切回去的時(shí)候滾動(dòng)監(jiān)聽也不會(huì)有效果：

//keep-alive鉤子函數(shù)，組件恢復(fù)時(shí)觸發(fā)
activated(){ window.addEventListener('scroll', this.isScrollBot)},
//keep-alive鉤子函數(shù)，組件變?yōu)椴豢捎脮r(shí)觸發(fā)
deactivated(){ window.removeEventListener('scroll', this.isScrollBot)}

修改后的效果完全符合預(yù)期，切換路由頁面保留當(dāng)位置，不會(huì)重復(fù)請(qǐng)求接口而且也不會(huì)在專輯列表組件外部觸發(fā)滾動(dòng)加載。

二、關(guān)于keep-alive

既然用到了keep-alive，就通過文檔簡單總結(jié)下相關(guān)使用：

上面已經(jīng)說過，通過keep-alive包裹的組件，在不活動(dòng)時(shí)會(huì)緩存組件實(shí)例，不會(huì)對(duì)組件進(jìn)行銷毀，再次處于活動(dòng)狀態(tài)時(shí)，會(huì)讀取緩存的內(nèi)容并保存組件狀態(tài)，不用重復(fù)請(qǐng)求接口獲取數(shù)據(jù)。

（1）最基本使用基本用法：

基本用法：
<keep-alive>
 <component :is="view"></component>
</keep-alive>

也可以根據(jù)條件判斷：
<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>
這個(gè)時(shí)候觸發(fā)兩個(gè)組件切換時(shí)，組件內(nèi)的數(shù)據(jù)和狀態(tài)都會(huì)得到保存，如果有input輸入框，輸入框內(nèi)容會(huì)保留

（2）有條件的緩存

keep-alive提供了include、exclude、max三個(gè)參數(shù)，前兩個(gè)允許組件有條件的進(jìn)行緩存，兩者都可以接受字符串、正則、數(shù)組形式；max表示最多可以緩存多少個(gè)組件，接受一個(gè)number類型。

<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
此時(shí)只有a、b兩個(gè)組件會(huì)觸發(fā)keep-alive，此處的名字是組件內(nèi)部name對(duì)應(yīng)名字，如果name不存在，會(huì)查找父組件里components里注冊(cè)的名字，如果也不存在則不會(huì)匹配。
正則和數(shù)組方法同上，但是需要用v-bind:include=''方式。

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

（3）鉤子函數(shù)

兩個(gè)鉤子函數(shù)activated和deactivated，上面已經(jīng)說過，分別在組件恢復(fù)活動(dòng)狀態(tài)和組件失去活動(dòng)狀態(tài)時(shí)觸發(fā)，可以起到類似created和destroyed鉤子作用。

以上是對(duì)keep-alive的個(gè)人使用和理解，如有不足還望指正~

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論