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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設,壺關企業(yè)網(wǎng)站建設,壺關品牌網(wǎng)站建設,網(wǎng)站定制,壺關網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,壺關網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

  

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

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

包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。

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

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

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

二、關于keep-alive

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

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

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

基本用法：

 


也可以根據(jù)條件判斷：

  1">
 

這個時候觸發(fā)兩個組件切換時，組件內(nèi)的數(shù)據(jù)和狀態(tài)都會得到保存，如果有input輸入框，輸入框內(nèi)容會保留

（2）有條件的緩存

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

 

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


 

（3）鉤子函數(shù)

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

看完上述內(nèi)容，你們掌握keep-alive組件怎么在vue項目中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！