Trong các tình huống chuyển đổi component động hoặc điều hướng route, việc component bị hủy và tạo lại liên tục có thể dẫn đến các vấn đề sau:

• Mất trạng thái: Dữ liệu người dùng nhập vào biểu mẫu, vị trí cuộn trang không được lưu giữ.
• Tiêu tốn tài nguyên: Việc khởi tạo lại component lặp đi lặp lại làm tốn tài nguyên hệ thống.
• Trải nghiệm người dùng kém: Các phần tử trên trang bị nhấp nháy, hiệu ứng chuyển động bị gián đoạn.

KeepAlive là một giải pháp lưu trữ tích hợp của Vue 3 được thiết kế để giải quyết những vấn đề này.

Cơ chế hoạt động cốt lõi của KeepAlive

1. Cơ chế lưu trữ

• Sử dụng chiến lược lưu trữ LRU (Least Recently Used - Ít được sử dụng gần đây nhất).
• Tạo các node ảo đặc biệt để đánh dấu các component được lưu trữ.
• Sử dụng đối tượng Map để lưu trữ các instance đã được cache.
• Số lượng cache tối đa được kiểm soát bởi thuộc tính max (mặc định là không giới hạn).

// Minh họa logic lưu trữ được đơn giản hóa
const componentCache = new Map();
const cacheKeys = new Set();

function removeCachedEntry(key) {
  const cachedInstance = componentCache.get(key);
  if (cachedInstance) {
    cachedInstance.unmount(); // Hủy component đã cache
    componentCache.delete(key);
    cacheKeys.delete(key);
  }
}

2. Thay đổi vòng đời

Các component được cache sẽ kích hoạt các hook vòng đời đặc biệt:

• onActivated: Kích hoạt khi component được gắn vào DOM.
• onDeactivated: Kích hoạt khi component bị gỡ khỏi DOM.

Ứng dụng thực tế của KeepAlive

1. Sử dụng cơ bản

<template>
  <KeepAlive>
    <component :is="activeComponent" />
  </KeepAlive>
</template>

<script setup>
import { ref } from 'vue';

const activeComponent = ref('ComponentA');
// Logic để thay đổi activeComponent dựa trên tương tác người dùng
</script>

2. Kiểm soát cache chi tiết

<KeepAlive 
  :include="/UserList|UserProfile/" 
  :exclude="['AdminPanel']"
  :max="10"
>
  <router-view />
</KeepAlive>

3. Sử dụng nâng cao với Routing

Bạn có thể sử dụng thuộc tính meta của route để kiểm soát việc cache:

const routes = [
  {
    path: '/products/:id',
    component: ProductDetail,
    meta: { cacheEnabled: true } // Kích hoạt KeepAlive cho route này
  }
];

Và kết hợp với router-view:

<template>
  <router-view v-slot="{ Component, route }">
    <KeepAlive :include="cachedRoutes">
      <component :is="Component" :key="route.fullPath" />
    </KeepAlive>
  </router-view>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const cachedRoutes = computed(() => {
  return router.getRoutes()
    .filter(route => route.meta.cacheEnabled)
    .map(route => route.name); // Giả sử route có name
});
</script>

Các phương án lưu trữ khác ngoài KeepAlive

Bảng so sánh các giải pháp lưu trữ:

1. Lưu trữ instance component thủ công

<template>
  <component 
    v-for="(_, key) in componentInstances"
    :is="componentInstances[key]"
    v-show="currentKey === key"
    :key="key"
  />
</template>

<script setup>
import { shallowRef } from 'vue';

const componentInstances = shallowRef({});
const currentKey = ref(null);

function cacheComponent(key, componentDefinition) {
  componentInstances.value[key] = componentDefinition;
}

function displayComponent(key) {
  currentKey.value = key;
}
</script>

2. Giải pháp quản lý trạng thái (Ví dụ với Pinia)

// stores/persistentStates.js
import { defineStore } from 'pinia';

export const useDataStore = defineStore('dataPersistence', {
  state: () => ({
    savedStates: new Map()
  }),
  actions: {
    persistState(componentId, stateData) {
      this.savedStates.set(componentId, stateData);
    },
    retrieveState(componentId) {
      return this.savedStates.get(componentId);
    },
    clearState(componentId) {
      this.savedStates.delete(componentId);
    }
  }
});

Lời khuyên tối ưu hóa hiệu năng

1. Thiết lập thuộc tính max hợp lý để tránh rò rỉ bộ nhớ.
2. Sử dụng chỉ thị v-once cho các phần phức tạp của component để tối ưu hóa.
3. Dọn dẹp cache không cần thiết kịp thời bằng cách sử dụng include/exclude.
4. Theo dõi số lượng cache hiện có:

// Trong component con được cache
import { inject, onMounted } from 'vue';

const cacheInstance = inject('KeepAlive'); // Cách inject có thể khác tùy phiên bản

onMounted(() => {
  // Truy cập vào cache bên trong KeepAlive (cần cẩn trọng vì đây là API nội bộ)
  const internalCache = cacheInstance.ctx.cache; 
  console.log('Số lượng cache hiện tại:', internalCache.size);
});

KeepAlive là giải pháp chính thức của Vue 3 và đáp ứng hầu hết các nhu cầu lưu trữ cơ bản. Tuy nhiên, đối với các trường hợp yêu cầu kiểm soát chi tiết chiến lược lưu trữ, phục hồi trạng thái phức tạp, hoặc cần giữ instance component trong thời gian dài, bạn có thể kết hợp với các phương pháp như lưu trữ thủ công, quản lý trạng thái để xây dựng các giải pháp linh hoạt hơn.

• Lựa chọn ưu tiên:
• Luôn ưu tiên sử dụng KeepAlive cho các nhu cầu cơ bản.
• Khi cần giữ instance component trong thời gian dài, hãy xem xét lưu trữ thủ công.
• Chỉ cần lưu trữ dữ liệu trạng thái, hãy sử dụng giải pháp quản lý trạng thái.
• Với các chiến lược cache đặc biệt, có thể cân nhắc các thư viện bên thứ ba.

Bằng cách áp dụng hợp lý các chiến lược lưu trữ này, bạn có thể vừa đảm bảo hiệu năng ứng dụng, vừa mang lại trải nghiệm người dùng mượt mà.