欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年06月01日 14:23:17   作者：范天緣  
這篇文章主要介紹了vue關(guān)于點(diǎn)擊詳情頁(yè)面keep-alive的緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

點(diǎn)擊詳情頁(yè)面keep-alive的緩存問題

今天有個(gè)列表 

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

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

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

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

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

頁(yè)面效果

父組件代碼

<!-- 如果沒有 include 屬性，那么就會(huì)緩存全部子路由組件，這樣做是沒有必要的，只緩存表單組件即可 -->
<keep-alive include='News‘>
<!-- 緩存多個(gè)組件的寫法 -->
<!-- <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>

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

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

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

相關(guān)文章

最新評(píng)論