場景

今天產品跑過來跟我說，
當我在A頁面修改資料後，去B頁面。
然後返回A頁面。希望A頁面保留我修改後的資料。
而不是資料又恢復最初的樣子了。我心裡想，尼瑪,又要加班了？
看下面小粒子

資料被被重置的問題

<template>
  <div>
      <el-button @click="gotosHander">去詳情頁面</el-button>
      <el-button @click="changeHander">改變資料</el-button>
      <ul class="box">
        <li class="demoli" v-for="(item,index) in list" :key="index">
          {{ item.name }}==> {{item.age  }}
        </li>
      </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        list:[
          {name:'張三',age:23},
          {name:'李四',age:33},
        ]
      }
    },
    methods:{
      gotosHander(){
        this.$router.push("/details")
      },
      changeHander(){
        this.list=[
          {name:'何西亞',age:33},
        ]
      }
    }
  }
</script>
 

我們發現的問題

在頁面更改資料後，我們去詳情頁面。
在返回上一個頁面。資料被重置了。
但是我們並不想資料重置。
想讓他保留我們更改後的樣子，
怎麼辦？？？？？

使用keep-alive解決資料被重置

<keep-alive>
    <router-view></router-view>
</keep-alive>

在頁面中使用一個定時器

<template>
  <div>
      <el-button @click="gotosHander">去詳情頁面</el-button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        timer:null
      }
    },
   
    methods:{
      gotosHander(){
        this.$router.push("/details")
      },
    },
    mounted(){
      this.timer=setInterval(()=>{
        console.log("@@@@@@@@@@@@@@@@@@@")
      },100)
    },
    beforeDestroy(){
      clearInterval(this.timer)
    }
  }
</script>
 

keep-alive產生的問題

如果我們在頁面中寫一個定時器，
那麼這個定時器在beforeDestroy中將不會被清除。
也就是說:使用keep-alive後，頁面中的beforeDestroy不會被執行

如何讓頁面中的beforeDestroy被執行

我們可以使用生命週期 activated 和 deactivated

activated是頁面或者元件被啟用的時候觸發該函式，
啟用可以理解為展示在頁面上的時候。

deactivated是頁面別取消隱藏的時候觸發該函式
我們從詳情頁進入該頁面的時候，

使用activated函式。因為是展示嘛~
當我們離開該頁面的時候觸發函式deactivated，因為是隱藏嘛~
 

從詳情頁進入該頁面

<template>
  <div>
      <el-button @click="gotosHander">去詳情頁面</el-button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        timer:null
      }
    },
   
    methods:{
      gotosHander(){
        this.$router.push("/details")
      },
    },
    mounted(){
      this.timer=setInterval(()=>{
        console.log("@@@@@@@@@@@@@@@@@@@")
      },100)
    },
    activated(){
      console.log("頁面被啟用的時候觸發該函式")
    },
    deactivated(){
      clearInterval(this.timer)
      console.log("頁面被取消/切換的時候觸發該函式")
    },
  }
</script>

keep-alive的後遺症

剛剛我們說了，使用keep-alive後，預設情況下，
所有頁面中的beforeDestroy和destroyed生命週期函式不會被執行了
我的個乖乖~，好可怕！
其實也不是沒有辦法，只是我們使用include。
include只會快取與之匹配的值

include的使用

<keep-alive  include="yourPageName">
    <router-view></router-view>
</keep-alive>
上面這段程式碼只會快取【頁面、元件】名是yourPageNamede

如果你需要快取多個頁面或者元件。
你可以寫成一個數組
<keep-alive  :include="['yourPageName','xingqing']">
    <router-view></router-view>
</keep-alive>


<template>
    <div>
        <el-button @click="backHander">返回上一頁</el-button>
        我是詳情頁面
    </div>
</template>

<script>
    export default {
        //這個是元件或者頁面名。
        // 因為include會自動匹配，該元件會被快取
        // 所以銷燬的生命週期是不會被執行的
        // activated【啟用、展示】 和 deactivated【隱藏、離開】會被執行
        name:'xingqing', 
    }
</script>

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！