Vue Keep-Alive & Performance Optimization

Khi xây dựng ứng dụng Vue.js, việc điều hướng giữa các component hoặc trang có thể gây mất trạng thái dữ liệu và làm chậm hiệu suất. Keep-Alive là một tính năng giúp lưu trạng thái của component khi chuyển đổi qua lại, tránh việc tải lại dữ liệu không cần thiết.

Ngoài ra, chúng ta cũng sẽ tìm hiểu một số kỹ thuật tối ưu hóa hiệu suất như computed properties, watchers, và debounce để giảm số lần render không cần thiết.

Keep-Alive là gì? Khi nào nên dùng?

Keep-Alive là một component đặc biệt trong Vue.js, giúp giữ lại trạng thái của các component con khi chúng bị ẩn đi và hiển thị lại.

Khi nào nên dùng Keep-Alive?

• Khi có nhiều tab chuyển đổi qua lại (ví dụ: Dashboard, Profile, Settings).
• Khi cần giữ dữ liệu form khi quay lại trang trước.
• Khi muốn tránh gọi lại API không cần thiết.

Khi không nên dùng Keep-Alive?

• Khi component cần làm mới dữ liệu mỗi lần hiển thị.
• Khi component có dữ liệu động thay đổi liên tục.

Cách sử dụng <keep-alive> để lưu trạng thái component

Vue cung cấp một thẻ <keep-alive> để bọc các component động, giúp Vue lưu lại trạng thái của chúng.

Ví dụ:

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

Hoặc sử dụng trong Vue Router để giữ trạng thái của các trang:

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

Lưu ý: Chỉ hoạt động với component có name.

Tối ưu hóa Vue với computed, watch và debounce

Ngoài Keep-Alive, ta có thể tối ưu hiệu suất bằng cách:

• Sử dụng computed thay vì methods: Tránh tính toán lại giá trị khi không cần thiết.
• Dùng watchers hợp lý: Theo dõi sự thay đổi của dữ liệu để cập nhật trạng thái.
• Áp dụng debounce: Trì hoãn xử lý sự kiện nhập liệu để tránh render liên tục.

Ví dụ về debounce khi nhập liệu:

<template>
  <input v-model="search" placeholder="Nhập từ khóa..." />
  <p>Kết quả: {{ result }}</p>
</template>

<script>
import { ref, watch } from 'vue';
import debounce from 'lodash/debounce';

export default {
  setup() {
    const search = ref('');
    const result = ref('');

    watch(
      search,
      debounce((newVal) => {
        result.value = `Tìm kiếm: ${newVal}`;
      }, 500) // Chỉ cập nhật sau 500ms nếu không có thay đổi mới
    );

    return { search, result };
  },
};
</script>

Lợi ích của debounce: Hạn chế số lần cập nhật không cần thiết khi nhập liệu nhanh.

Thực hành: Sử dụng Keep-Alive để tăng tốc độ điều hướng giữa các trang

Mục tiêu:

• Sử dụng <keep-alive> để giữ trạng thái component khi chuyển đổi trang.
• Kiểm tra hiệu suất với Vue DevTools.

Bước 1: Bọc <router-view> trong <keep-alive>.
Bước 2: Xác minh rằng dữ liệu component không bị reset khi điều hướng.
Bước 3: Kết hợp với computed & debounce để tối ưu hiệu suất.

Kết luận

• Keep-Alive giúp giữ trạng thái component, tối ưu hiệu suất khi điều hướng.
• Computed properties và watch giúp giảm số lần render không cần thiết.
• Debounce giúp hạn chế số lần xử lý dữ liệu, đặc biệt với sự kiện nhập liệu.