vue中keep-alive的工作原理及使用方法詳解-Vue.js-PHP中文網

vue中keep-alive的工作原理及使用方法詳解

王林

發布： 2023-07-21 11:58:53

原創

2266 人瀏覽過

Vue.js 是一個受歡迎的前端框架，提供了一些方便的功能來優化效能和提升開發效率。其中一個功能是 keep-alive，它可以幫助我們在元件之間保留狀態，從而減少不必要的渲染和請求。本文將詳細介紹 keep-alive 的工作原理以及使用方法，並提供一些程式碼範例。

一、`keep-alive` 的工作原理

在 Vue.js 中，每當我們切換元件時，元件就會重新建立和渲染。這表示每次切換元件時，元件的狀態都會重置，需要重新載入資料。對於一些狀態較穩定的元件，這種行為會導致不必要的效能浪費。

而 keep-alive 元件的作用是將需要保留狀態的元件快取起來，而不是銷毀和重新建立。這樣，在切換元件時，如果元件已經被緩存，它將直接從快取中讀取狀態，而不是重新載入資料和渲染。

keep-alive 的工作原理如下：

#第一次載入元件時，會將元件實例快取起來，同時將元件的vm. $el（元件實例的根DOM 元素）從DOM 樹移除。
當切換到其他元件後，原始元件的 vm.$el 會放入一個名為 _inactive 的陣列中儲存起來。
如果再次切換回原始元件，原始元件的 vm.$el 會從 _inactive 陣列中取出，並重新插入 DOM 樹中。

要注意的是，由於元件被快取起來，所以元件的生命週期鉤子函數（如created、mounted 等）只在第一次載入時觸發一次，後續切換時不會再觸發。

二、`keep-alive` 的使用方法

在Vue.js 中，我們可以使用<keep-alive> 元件來包裹需要快取的組件。以下是一些常見的使用方法：

快取單一元件：

<template>
  <div>
    <keep-alive>
      <Component></Component>
    </keep-alive>
  </div>
</template>

登入後複製

在這個範例中，<Component> 元件將會被緩存起來。當切換到其他元件後再切換回來時，<Component> 元件會從快取中讀取狀態，而不是重新建立。

快取多個元件：

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

登入後複製

在這個範例中，所有透過路由設定載入的元件都會被快取起來。當切換路由時，已經載入過的元件將從快取中讀取狀態。

動態快取元件：

<template>
  <div>
    <keep-alive :include="includeComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      includeComponents: ['ComponentA', 'ComponentB']
    }
  }
}
</script>

登入後複製

在這個範例中，只有包含在 includeComponents 陣列中的元件才會被快取。其他元件在切換時將會被銷毀並重新建立。

快取前後狀態不同的元件：

<template>
  <div>
    <keep-alive :exclude="excludeComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      excludeComponents: ['ComponentA']
    }
  }
}
</script>

登入後複製

在這個範例中，將不會快取在 excludeComponents 陣列中的元件。這表示切換到其他元件後，再切換回來時，被排除的元件將會重新建立。