一、問題觸發并解決

最近自己在寫vue練習，內容相對簡單，主要是對vue進行熟悉和相關問題發現，查漏補缺。簡單說下練習的項目內容及問題的產生：

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

簡單的背景介紹完了，說下問題產生的情形：在從整個歌曲列表頁點擊跳轉到單個專輯列表頁，然后點擊返回按鈕返回歌曲列表頁時，頁面保存了之前的瀏覽位置，但是接口重新請求了數據，因為歌曲列表頁有滾動加載效果，所以數據獲取在vuex里用了數組的concat方法，導致返回請求的數據重新加載了列表里，而v-for循環由于key值有了重復，導致控制臺報錯；說起來可能比較難懂，上一些基本的代碼部分：

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的時候恢復監聽，否則切回去的時候滾動監聽也不會有效果：