Vue keep-alive 詳細介紹（動態組件、路由組件快取優化）

用法

keep-alive 是 Vue 的內置組件，當它包裹動態組件時，會快取不活動的組件實體，而不是銷毀它們，和 transition 相似，keep-alive 是一個抽象組件：它自身不會渲染成一個 DOM 元素，也不會出現在父組件鏈中，當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函式將會被對應執行，

在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發，

作用

在組件切換程序中將狀態保留在快取中，防止重復渲染DOM，減少加載時間及性能消耗，優化用戶體驗，（主要用于保留組件狀態或避免重新渲染）

Props

• include - 字串或正則運算式，只有名稱匹配的組件會被快取，
• exclude - 字串或正則運算式，任何名稱匹配的組件都不會被快取，
• max - 數字，最多可以快取多少組件實體，

生命周期鉤子

activated

在 keep-alive 組件激活時呼叫（該鉤子函式在服務器端渲染期間不被呼叫），

deactivated

在 keep-alive 組件失活時呼叫（該鉤子在服務器端渲染期間不被呼叫），

被包含在 keep-alive 中的組件，會多出兩個生命周期的鉤子：activated 與 deactivated，使用 keep-alive 會將資料保留在快取中，如果要在每次進入頁面的時候獲取最新的資料，需要在activated 階段獲取資料（因為被包裹的組件只有在首次渲染才會去執行created、mounted等鉤子），承擔原來在created、mounted等鉤子獲取資料的任務，

注意： 只有組件被 keep-alive 包裹時，這兩個生命周期函式才會被呼叫，如果作為正常組件使用，是不會被呼叫的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子函式依然不會被呼叫！另外，在服務端渲染時，此鉤子函式也不會被呼叫，

示例

快取（所有）路由組件

App.vue（未使用keep-alive）

<template>
  <div id="app">
    <div id="nav">
      <div class="main-content">
        <router-link to="/home" active-class="isActive">Home</router-link>
        <span>|</span>
        <router-link to="/about" active-class="isActive">About</router-link>
        <div class="router-view-content">
          <!-- 使用 <router-view> 渲染路徑匹配到的視圖組件 -->
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

路由組件1：Home.vue

<template>
  <div class="home">
    <p>This is a Home page</p>
    <el-input v-model="inputText" placeholder="請輸入" style="width:50%"></el-input>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      inputText: "",
    };
  },
};
</script>

路由組件2：About.vue

<template>
  <div class="about">
    <p>This is an About page</p>
    <el-select v-model="value" placeholder="請選擇" style="width: 50%">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      value: "",
      options: [
        {
          value: "zhangsan",
          label: "張三",
        },
        {
          value: "lisi",
          label: "李四",
        },
      ],
    };
  },
};
</script>

在未使用keep-alive情況下，在Home頁面輸入框輸入內容

然后切換到About頁面，在選擇框選擇內容

之后進行一次來回切換，此時切換回Home頁面，原先輸入框的內容消失；相同的，切換回About頁面，選擇框的內容也消失，其實是因為這兩個組件被銷毀之后重新渲染了，

加上keep-alive，重復上面的操作，發現保留了組件狀態（不銷毀組件），避免了重新渲染，

根據條件快取頁面

如App.vue，使用include，此時只快取Home頁面的狀態

<template>
  <div id="app">
    <div id="nav">
      <div class="main-content">
        <router-link to="/home" active-class="isActive">Home</router-link>
        <span>|</span>
        <router-link to="/about" active-class="isActive">About</router-link>
        <div class="router-view-content">
          <!-- 使用 <keep-alive> 按條件快取路由組件，使用include -->
          <keep-alive include="Home">
            <!-- 使用 <router-view> 渲染路徑匹配到的視圖組件 -->
            <router-view />
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

或者使用exclude，如下，表示快取除了Home之外其他頁面的狀態

<template>
  <div id="app">
    <div id="nav">
      <div class="main-content">
        <router-link to="/home" active-class="isActive">Home</router-link>
        <span>|</span>
        <router-link to="/about" active-class="isActive">About</router-link>
        <div class="router-view-content">
          <!-- 使用 <keep-alive> 按條件快取路由組件，使用exclude -->
          <keep-alive exclude="Home">
            <!-- 使用 <router-view> 渲染路徑匹配到的視圖組件 -->
            <router-view />
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

include 和 exclude 允許組件有條件地快取，二者都可以用逗號分隔字串、正則運算式或一個陣列來表示，匹配時，首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的區域注冊名稱 (父組件 components 選項的鍵值)，匿名組件不能被匹配，

除了以上方式，另外一種對路由組件部分快取

修改路由配置

修改App.vue

<template>
  <div id="app">
    <div id="nav">
      <div class="main-content">
        <router-link to="/home" active-class="isActive">Home</router-link>
        <span>|</span>
        <router-link to="/about" active-class="isActive">About</router-link>
        <div class="router-view-content">
          <keep-alive>
            <!-- keepAlive為true，則使用 <keep-alive> 進行快取 -->
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>

          <!-- keepAlive為false，則不快取 -->
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

通過 $route.meta.keepAlive（即配置中的keepAlive）決定那些路由組件需要被快取，

其他

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多個條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

注意：<keep-alive> 是用在其一個直屬的子組件被開關的情形，如果你在其中有 v-for 則不會作業，如果有上述的多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染，

以上就是keep-alive的基本用法，它包裹的組件（即被快取的組件），再次進入時執行activated鉤子，離開時執行deactivated鉤子，可以利用此進行一些操作，如請求資料，解除監聽等，