Vue 3 路由元件快取keep-alive

槑孒發表於2024-08-30
Vue路由元件快取Keep-Alive

Vue 3 路由元件快取

Vue3 KeepAlive官方文件

1. keep-alive 基本介紹

  • keep-alive 是 Vue 的內建元件，用於快取動態元件或路由元件，避免元件被頻繁銷燬和重建，從而提高效能。
  • 當元件被 keep-alive 包裹後，在路由切換時不會銷燬元件，而是將其快取起來。下次切換回來時，會直接使用快取，而不是重新渲染。

2. keep-alive 基本使用

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>
  • router-view 用於顯示當前匹配的路由元件，包裹在 keep-alive 中後，可以實現元件的快取。

3. keep-alive 的屬性

  • include：指定需要被快取的元件。匹配元件的 name 屬性，可以是字串或正規表示式。
  • exclude：指定不需要被快取的元件。匹配元件的 name 屬性，可以是字串或正規表示式。
  • max：最多快取的元件例項數量。超過這個數量時，最久沒有使用的例項會被銷燬。

示例：

<template>
  <keep-alive include="Home,About" exclude="Contact" max="3">
    <router-view />
  </keep-alive>
</template>
  • include: 只快取 Home 和 About 元件。
  • exclude: 不快取 Contact 元件。
  • max: 最多快取 3 個元件例項。

4. 路由元件的快取

  • 在 Vue Router 中，使用 keep-alive 快取路由元件時，確保每個路由元件都有一個唯一的 name 屬性。

  • 路由配置示例：

    const routes = [
  { path: '/home', name: 'Home', component: () => import('@/views/Home.vue') },
  { path: '/about', name: 'About', component: () => import('@/views/About.vue') },
  { path: '/contact', name: 'Contact', component: () => import('@/views/Contact.vue') }
];

  • 元件示例：

    <script>
export default {
  name: 'Home'
};
</script>

  • 在主元件中使用 keep-alive 快取這些路由元件：

    <template>
  <keep-alive include="Home,About">
    <router-view />
  </keep-alive>
</template>

注意，include和exclude的值是對應的元件名。
在vue3的setup語法糖中可以使用unplugin-vue-define-options外掛簡化操作
Vue3 name 屬性使用技巧

<script setup lang="ts">
defineOptions({
  name: "MyComponent"  
})
<script>

還可以使用vite-plugin-vue-setup-extend外掛來直接在script上進行屬性name命名元件

<script setup lang="ts" name="User">
# 這裡至少有一行註釋，否則外掛不生效
</script>


Vue3.x中給元件新增name屬性

5. 元件的生命週期鉤子

  • activated：元件被啟用（從快取中恢復）時呼叫。
  • deactivated：元件被停用（進入快取）時呼叫。
  • 示例：
    <script>
export default {
  name: 'Home',
  activated() {
    console.log('Home component activated');
    // 元件從快取中恢復時，可以重新載入資料或執行其他操作
  },
  deactivated() {
    console.log('Home component deactivated');
    // 元件被快取時，執行清理操作
  }
};
</script>

6. 處理快取問題

  1. 快取更新問題：

    • 使用動態 key 強制元件重新渲染而非使用快取。
    • 示例：
      <template>
  <router-view :key="$route.fullPath" />
</template>

  2. 選擇性快取：

    • 使用 include 和 exclude 精細控制快取，也可使用 v-if 等手段手動銷燬元件。

總結

  • keep-alive 是 Vue 中用於快取元件的工具，常用於路由元件的快取。
  • 使用 include 和 exclude 精細控制哪些元件需要快取。
  • 使用 activated 和 deactivated 生命週期鉤子處理元件啟用和停用時的邏輯。
  • 動態 key 設定可以強制元件重新渲染。

相關文章