vue關於點擊詳情頁面keep-alive的緩存問題

Posted on by

點擊詳情頁面keep-alive的緩存問題

今天有個列表 

點擊以後 進入詳情 然後在返回，再點擊其他的列表數據，詳情頁面請求的還是上一次請求的id 除非刷新才會請求現在的.

這樣子對用戶體驗感是非常不好滴,查瞭半天資料 發現瞭activated這個api

解決有些不需要被緩存的組件頁面 設置 activated 即可以再次進行事件的響應

vue中路由表單緩存（keep-alive）

vue 中從一個路由切換到另一個路由的時候，第一個路由可能有表單信息，但切換到第二個路由時，第一個路由裡的組件會被銷毀，表單裡填寫的 value 也會消失，keep-alive 就可以幫我們緩存我們不想被銷毀的組件。

頁面效果

父組件代碼

<!-- 如果沒有 include 屬性，那麼就會緩存全部子路由組件，這樣做是沒有必要的，隻緩存表單組件即可 -->
<keep-alive include='News‘>
<!-- 緩存多個組件的寫法 -->
<!-- <keep-alive :include=['News','Massage']> -->
	<router-view></router-view>
</keep-alive>

被緩存組件代碼

<template>
  <ul>
    <li>news001 <input type='text'></li>
    <li>news002 <input type='text'></li>
    <li>news003 <input type='text'></li>
  </ul>
</template>
<script>
export default {
  name: "News",
};
</script>

那麼問題來瞭，如果在緩存組件開一個定時器，那麼切換到其他組件定時器永遠不會被銷毀，這樣運行效率會很低，那麼這時候我們需要兩個新的生命周期函數 activated 與 deactivated

<script>
  export default {
    name:'News',
    data(){
      return {
        count:0,
      }
    },
    activated(){
      this.timer = setInterval(()=>{
        this.count++
      },20)
    },
    deactivated(){
      clearInterval(this.timer)
    }
  }
</script>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：