問題描述（什麼是keep-alive）

• keep-alive顧名思義，保持活躍。保持誰活躍呢？
• 首先我們知道，因為vue就是元件化程式設計，一個.vue檔案就是一個元件。就像萬事萬物一樣，都有從出生到消亡的生命週期過程，vue的元件也是一樣，也有自己的生命週期，比如create建立元件、mounted往元件上掛資料、update更新元件上掛的資料，destroy把元件例項銷燬。
• 所以使用keep-alive就是保持元件活躍，不會被destroy銷燬掉，就一直還活著，元件沒有被銷燬掉的話，元件上掛載的資料就還存在，所以狀態就可以保留，所以，keep-alive就可以保持元件的狀態。
  

http協議的請求頭裡面也有一個keep-alive，保持http通話，這樣：Connection: keep-alive 功能雖然不一樣，但是思想上是一樣的即為~保持狀態活躍

小demo，看一下keep-alive的使用效果

demo分為上面的路由導航部分，下面的內容區部分。點選上面的路由導航，路由檢視渲染對應的路由元件。效果圖如下：

未使用keep-alive的效果圖

對應程式碼

// #App.vue中
<template>
  <div class="box">
    <!-- 路由導航 -->
    <div class="nav">
      &lwww.cppcns.com
 
t;router-link to="/">去home頁面</router-link>
      <router-link to="/about">去about頁面</router-link>
      <router-link to="/detail">去detail頁面</router-link>
    </div>
    <!-- 路由導航對應的內容區 -->
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

// home.vue中，放置一個複選框
<el-checkbox v-model="checked">備選項</el-checkbox>

// about.vue中，放置一個輸入框
<el-input v-model="input"
 
程式設計客棧 placeholder="請輸入內容"></el-input>

// detail.vue中方式一個下拉框
<el-select v-model="value" placeholder="請選擇">
  <el-option
    v-for="item in options"
    :key="item.value"
    :laJebOhsfbel="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

分析

• 我們發現，當我們沒有使用keep-alive元件包裹住router-view檢視元件的時候，左邊~我們在去home頁面勾選了，在去about頁面輸入了，在去detail頁面下拉選擇了，離開這個路由頁面，再回來時，我們發現我們之前做的操作，勾選、輸入、下拉選擇都不存在了，之前的狀態都沒了。原因很簡單，當離開這個路由頁面的時候，會觸發這個路由頁面對應元件上的destroy鉤子方法，然後這個路由頁面對應的元件就被銷燬了，元件銷燬了，元件上的掛載的資料也就啥也沒有了。
• 與此同時，我們可以看到在右邊的Vue.js devtools工具中，router-view檢視層始終只是home、about、detail元件來回切換，元件來回切換，其實就是元件不斷的建立、銷燬的過程。加下來我們看看使用keep-alive的效果。
  

使用keep-alive的效果圖

對應程式碼

<template>
  <div class="box">
    <!-- 路由導航 -->
    <div class="nav">
      <router-link to="/">去home頁面</router-link>
      <router-link to="/about">去about頁面</router-link>
      <router-link to="/detail">去detail頁面</router-link>
    </div>
    <!-- 路由導航對應的內容區 -->
    <main>
      <keep-alive> <!-- 使用keep-alive包了一層，就可以快取啦 -->
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>
</template>

分析

我們給檢視層元件使用keep-alive包住以後，我們發現，我們勾選、輸入、下拉選擇的內容，在路由來回切換的時候，就不會丟失了，即使用keep-alive儲存了之前的元件狀態

與此同時，我們可以看到在右邊的Vue.js devtools工具中，在router-view檢視中對應的，切換過去的元件已經處於inactive狀態，inactive英文意思是不活動的、未使用的，即已經快取的，沒有銷燬的。所以元件上的我們所做的操作、元件的狀態就被快取了，所以我們勾選的、輸入的、下拉選擇的都還在。

Vue.js devtools挺好用，可以通過谷歌下載，vue開發中的很好的工具

引出問題

看到這裡我們發現，直接加上keep-alive的話，會把所有的router-view層級下的檢視的元件都快取了，不過有的時候，我們只想快取部分，不想快取所有的，那這怎麼辦呢？沒關係，大佬們已考慮到了，已經提前為我們解決好了，就是keep-alive中的include、exclude屬性

include和exclude指定是否快取某些元件

include屬性

include 包含的意思。值為字串或正則表示式或陣列。只有元件的名稱與include的值相同的才會被快取，即指定哪些被快取，可以指定多個被快取。這裡以字串為例，指定多個元件快取，語法是用逗號隔開。如下：

// 指定home元件和about元件被快取
<keep-alive include="home,a程式設計客棧bout" >
    <router-view></router-view>
</keep-alive>

exclude屬性

exclude相當於include的反義詞，就是除了的意思，指定哪些元件不被快取，用法和include類似，如下：

// 除了home元件和about元件別的都快取，本例中就是隻快取detail元件
<keep-alive exclude="home,about" >
    <router-view></router-view>
</keep-alive>

以include="about,detail"為例的效果圖

語法的意思是，只快取about和detail，別的元件不快取。我們看下圖的vue工具，也可以看出來，快取的元件，不處於對應展示的路由下，就會成為inactive狀態。

keep-alive除了include和exclude屬性之外，還有一個屬性就是max屬性，這個max一般情況用的不是太多，主要目的就是控制一下被快取的元件的個數，後快取的就會把先快取的給擠掉線了，也是相當於快取優化的一中策略了。畢竟適當快取提高使用者體驗，快取過渡，電腦變卡。

include和exclude的屬性值是元件的名稱

include和exclude的屬性值是元件的名稱，也就是元件的name屬性值，也就是如下的name屬性值。

&l程式設計客棧t;script>
    export default {
      name: "App"
      // ...
    };
</script>

引出問題

我們知道元件中都有對應的邏輯js部分，而且元件要發請求獲取資料的，一般情況下，我們都是在created或者mounted鉤子中去發請求，向後端的大佬要資料的，關於使用keep-alive後的元件的鉤子函式的問題，我們需要注意一下

使用keep-alive的鉤子函式執行順序問題

首先使用了keep-alive的元件以後，元件上就會自動加上了activated鉤子和deactivated鉤子。

• activated 當元件被啟用（使用）的時候觸發 可以簡單理解為進入這個頁面的時候觸發
• deactivated 當元件不被使用（inactive狀態）的時候觸發 可以簡單理解為離開這個頁面的時候觸發
  

進入元件和離開元件鉤子執行順序

假設我們只快取home元件，我們先看一下程式碼，再在鉤子中打印出對應的順序。就知道鉤子執行的順序了，自己動手印象深刻

程式碼如下

<template>
<div>
  <el-checkbox v-model="checked">備選項</el-checkbox>
</div>
</template>
<script>
export default {
name: "home",data() { return { checked: false } },created() {
  console.log("我是created鉤子");
},mounted() {
  console.log("我是mounted鉤子");
},activated() {
  console.log("我是activated鉤子");
},deactivated() {
  console.log("我是deactivated鉤子");
},beforeDestroy() {
  console.log("我是beforeDestroy鉤子");所以我們可以得出結論：
},};
</script>

進入元件列印結果如下

我是created鉤子
我是mounted鉤子
我是activated鉤子

離開元件列印結果如下

我是deactivated鉤子

得出結論

初始進入和離開 created ---> mounted ---> activated --> deactivated
後續進入和離開 activated --> deactivated

所以我們可以在activated 和deactivated鉤子中去做一些邏輯處理，這兩個鉤子有點類似mounted和beforeDestroy鉤子，但是還是不一樣。畢竟使用keep-alive不會銷燬元件

keep-alive的應用場景舉例

• 查看錶格某條資料詳情頁，返回還是之前的狀態，比如還是之前的篩選結果，還是之前的頁數等
• 填寫的表單的內容路由跳轉返回還在，比如input框、下選擇拉框、開關切換等使用者輸入了一大把東西，跳轉再回來不能清空啊，不能讓使用者再寫一遍啊，是吧老鐵
• 反正就是保留之前的狀態，具體應用場景其實也有很多，在此不贅述...
  

補充

上述我們使用的是keep-alive包裹router-view的小案例來講解的，實際上keep-alive一般情況下，要麼包裹router-view，要麼包裹動態元件component。程式碼寫法實際上是一樣的。包裹動態元件的用法如下：

<keep-alive include="home" exclude="about">
     <component :is="whichComponent"></component>
</keep-alive>

keep-alive的include和exclude屬性也支援v-bind的語法，所以也是很靈活的。

總結

到此這篇關於vue中keep-alive元件用法的文章就介紹到這了,更多相關vue keep-alive元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！