vue中keep-alive詳細講解

場景

今天產品跑過來跟我說，
當我在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>