vue關(guān)于點擊詳情頁面keep-alive的緩存問題

更新時間：2022年06月01日 14:23:17 作者：范天緣

這篇文章主要介紹了vue關(guān)于點擊詳情頁面keep-alive的緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

今天有個列表

點擊以后進入詳情然后在返回，再點擊其他的列表數(shù)據(jù)，詳情頁面請求的還是上一次請求的id 除非刷新才會請求現(xiàn)在的.

這樣子對用戶體驗感是非常不好滴,查了半天資料發(fā)現(xiàn)了activated這個api

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

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>

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

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

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: