Tối ưu hóa Rendering và Tránh Re-Renders Không Cần Thiết

Trong Vue.js, khi dữ liệu thay đổi, các component có thể bị re-render (tái kết xuất) ngay cả khi không cần thiết. Điều này có thể ảnh hưởng đến hiệu suất của ứng dụng, đặc biệt khi có nhiều component con hoặc dữ liệu lớn.

Vậy nguyên nhân nào gây re-render không cần thiết? Làm thế nào để tối ưu hóa rendering trong Vue? Hãy cùng tìm hiểu trong bài học này!

Nguyên nhân gây re-render không cần thiết

Một số nguyên nhân phổ biến dẫn đến re-render không mong muốn:

1. Thay đổi state mà không cần thiết (Reactive Data thay đổi dù không ảnh hưởng đến UI).
2. Component cha re-render khiến component con cũng bị render lại.
3. Sử dụng reactive object mà không tối ưu hóa việc theo dõi thay đổi.
4. Không có key khi sử dụng v-for, khiến Vue render lại toàn bộ danh sách thay vì chỉ cập nhật phần thay đổi.

Ví dụ lỗi phổ biến:

<template>
  <ul>
    <li v-for="item in items" :key="index">{{ item.name }}</li>
  </ul>
</template>

Trong trường hợp này, sử dụng :key="index" có thể gây lỗi khi danh sách thay đổi, vì Vue không biết mục nào thực sự thay đổi.

Cách đúng:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Dùng một giá trị duy nhất như id để giúp Vue theo dõi chính xác các phần tử thay đổi.

Cách tối ưu hóa rendering trong Vue.js

1. Sử dụng v-once để ngăn chặn re-render

v-once giúp Vue chỉ render một lần và không cập nhật component nếu dữ liệu thay đổi.
Ví dụ:

<h1 v-once>{{ title }}</h1>

Ứng dụng: Khi có dữ liệu tĩnh và không cần cập nhật.

2. Dùng v-memo để ghi nhớ giá trị cũ

v-memo giúp Vue chỉ re-render khi có thay đổi quan trọng, tránh render lại không cần thiết.
Ví dụ:

<div v-for="item in items" :key="item.id" v-memo="[item.name]">
  {{ item.name }}
</div>

Ứng dụng: Khi có nhiều phần tử lặp lại và chỉ muốn cập nhật khi dữ liệu thay đổi thực sự.

3. Sử dụng key hợp lý trong v-for

Dùng một giá trị duy nhất như ID thay vì index để Vue có thể tối ưu re-render.
Ví dụ đúng:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Ứng dụng: Khi render danh sách động từ API.

4. Kiểm soát re-render với computed và watch

Computed properties giúp Vue chỉ re-render khi có thay đổi thực sự.
Ví dụ:

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive);
  }
}

Ứng dụng: Khi cần tính toán dữ liệu mà không muốn re-render lại toàn bộ component.

5. Khi nào nên dùng shouldComponentUpdate?

Vue không có phương thức shouldComponentUpdate như React, nhưng có thể kiểm soát re-render bằng cách tách nhỏ component và sử dụng watchEffect hoặc computed.
Ví dụ:

watchEffect(() => {
  if (shouldUpdate) {
    fetchData();
  }
});

Ứng dụng: Khi chỉ muốn cập nhật component khi có sự kiện cụ thể.

Thực hành: Giảm số lần render bằng kỹ thuật tối ưu Vue

Bài tập: Tối ưu danh sách sản phẩm

Bước 1: Tạo component hiển thị danh sách sản phẩm

<template>
  <div>
    <h1 v-once>Danh sách sản phẩm</h1>
    <ul>
      <li v-for="product in products" :key="product.id" v-memo="[product.name]">
        {{ product.name }} - {{ product.price }}$
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: "Laptop", price: 1000 },
        { id: 2, name: "Phone", price: 500 }
      ]
    };
  }
};
</script>

• Áp dụng v-once vào tiêu đề để không render lại tiêu đề.
• Dùng v-memo để chỉ cập nhật mục thay đổi.

Bước 2: Kiểm tra với Vue DevTools

1. Mở Vue DevTools.
2. Quan sát component nào bị re-render.
3. Thay đổi dữ liệu và kiểm tra số lần render.

Kết luận

• Nguyên nhân gây re-render không cần thiết chủ yếu do thay đổi state không tối ưu.
• Sử dụng v-once, v-memo, key, computed và watch để kiểm soát re-render.
• Vue DevTools có thể giúp kiểm tra và tối ưu hóa hiệu suất ứng dụng.