Trong các ứng dụng Single Page Application (SPA) quy mô lớn, việc lạm dụng Pinia store có thể gây ra hiện tượng rò rỉ bộ nhớ (Memory Leak) và giảm hiệu năng render. Hãy giải thích nguyên nhân và đưa ra giải pháp tối ưu hóa?

Question

Accepted Answer

Trong các ứng dụng Vue 3 kết hợp Pinia, các vấn đề về hiệu năng và rò rỉ bộ nhớ thường xuất phát từ việc quản lý vòng đời (lifecycle) của store và các hàm theo dõi (watchers) không được dọn dẹp đúng cách.
Nguyên nhân gây giảm hiệu năng và rò rỉ bộ nhớ

Giữ tham chiếu không cần thiết: Mặc định, Pinia stores được đăng ký toàn cục (global) và tồn tại xuyên suốt vòng đời của ứng dụng (singleton). Nếu trong store, chúng ta gọi các API nặng hoặc đăng ký các sự kiện toàn cục (như window.addEventListener) mà không bao giờ hủy bỏ, các tham chiếu này sẽ giữ lại toàn bộ closure và DOM nodes trong bộ nhớ.

Sử dụng sai $subscribe hoặc watch: Khi đăng ký $subscribe bên ngoài các component hoặc bên trong các component nhưng không hủy hàm trả về (cleanup function), listener sẽ tiếp tục chạy ngầm ngay cả khi component đã bị unmount.

Giải pháp tối ưu hóa theo chuẩn Enterprise

Sử dụng Cleanup Function trong Setup Stores:

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useAnalyticsStore = defineStore('analytics', () => {
  const metrics = ref([]);

const handleResize = () => {
    // Xử lý sự kiện resize
  };

window.addEventListener('resize', handleResize);

// Nếu store có cơ chế hủy thủ công hoặc reset
  const dispose = () => {
    window.removeEventListener('resize', handleResize);
    metrics.value = [];
  };

return { metrics, dispose };
});

Hủy đăng ký Watcher tự động trong Component:
Khi sử dụng store.$subscribe bên trong component, hãy luôn gắn nó vào ngữ cảnh của Vue lifecycle hoặc lưu lại hàm cleanup:

import { onUnmounted } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const unsubscribe = userStore.$subscribe((mutation, state) => {
  console.log('State changed:', state);
});

// Bắt buộc gọi khi component bị hủy
onUnmounted(() => {
  unsubscribe();
});

Tránh lưu trữ dữ liệu DOM hoặc các đối tượng phức tạp: Pinia chỉ nên lưu trữ Plain Old JavaScript Objects (POJO) và primitive values. Việc lưu trữ các instance của class phức tạp, Vue component instances, hay DOM elements trong store sẽ làm hỏng cơ chế reactivity và gây phình to heap memory.

Trong các ứng dụng Single Page Application (SPA) quy mô lớn, việc lạm dụng Pinia store có thể gây ra hiện tượng rò rỉ bộ nhớ (Memory Leak) và giảm hiệu năng render. Hãy giải thích nguyên nhân và đưa ra giải pháp tối ưu hóa?

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Pinia liên quan cùng chủ đề

Trong các ứng dụng Single Page Application (SPA) quy mô lớn, việc lạm dụng Pinia store có thể gây ra hiện tượng rò rỉ bộ nhớ (Memory Leak) và giảm hiệu năng render. Hãy giải thích nguyên nhân và đưa ra giải pháp tối ưu hóa?

Đăng nhập để xem câu trả lời

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Pinia liên quan cùng chủ đề