keep-alive組件怎么在vue項目中使用

keep-alive組件怎么在vue項目中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

歌曲列表里created獲取數據，mounted監聽滾動事件滾動加載，destroyed取消監聽：
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可以對數據進行緩存，路由切換的時候可以使用緩存不用重新觸發接口請求，貌似可以很完美解決問題，實踐出真知，在代碼里添加：

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

添加完畢，回到頁面看效果！可喜可賀的是控制臺不報錯了，說明keep-alive起作用了，撒花慶祝~~~ 但是事情并沒有那么簡單，當我們從專輯列表切到其他路由，滾動鼠標會發現滾動加載的監聽事件沒有取消，組件destroyed的時候明明取消監聽了啊！而且再切回到專輯列表頁的時候，滾動加載反而不執行了，表示一臉懵~

經過查看vue文檔，發現文檔有這么一句話：

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

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

//keep-alive鉤子函數，組件恢復時觸發
activated(){ window.addEventListener('scroll', this.isScrollBot)},
//keep-alive鉤子函數，組件變為不可用時觸發
deactivated(){ window.removeEventListener('scroll', this.isScrollBot)}

修改后的效果完全符合預期，切換路由頁面保留當位置，不會重復請求接口而且也不會在專輯列表組件外部觸發滾動加載。

二、關于keep-alive

既然用到了keep-alive，就通過文檔簡單總結下相關使用：

上面已經說過，通過keep-alive包裹的組件，在不活動時會緩存組件實例，不會對組件進行銷毀，再次處于活動狀態時，會讀取緩存的內容并保存組件狀態，不用重復請求接口獲取數據。

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

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

也可以根據條件判斷：
<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>
這個時候觸發兩個組件切換時，組件內的數據和狀態都會得到保存，如果有input輸入框，輸入框內容會保留

（2）有條件的緩存

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

<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
此時只有a、b兩個組件會觸發keep-alive，此處的名字是組件內部name對應名字，如果name不存在，會查找父組件里components里注冊的名字，如果也不存在則不會匹配。
正則和數組方法同上，但是需要用v-bind:include=''方式。

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

（3）鉤子函數

兩個鉤子函數activated和deactivated，上面已經說過，分別在組件恢復活動狀態和組件失去活動狀態時觸發，可以起到類似created和destroyed鉤子作用。

看完上述內容，你們掌握keep-alive組件怎么在vue項目中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！