Vue.js Computed Properties: Hiểu Rõ và Sử Dụng Hiệu Quả

Vue.js Computed Properties: Hiểu Rõ và Sử Dụng Hiệu Quả

Trong Vue.js, computed properties (thuộc tính tính toán) là một trong những tính năng mạnh mẽ giúp chúng ta quản lý dữ liệu hiệu quả, tối ưu hóa hiệu suất source code. Trong bài viết này, chúng ta sẽ tìm hiểu về computed properties, cách sử dụng chúng và khi nào nên dùng so với methods và watchers, kèm theo ví dụ chi tiết.

1. Computed Properties là gì?

Computed properties là các thuộc tính trong Vue.js được tính toán dựa trên các thuộc tính dữ liệu khác. Chúng có khả năng tự động cập nhật khi dữ liệu phụ thuộc thay đổi, nhưng chỉ được tính toán lại khi cần thiết (tức là khi một trong các thuộc tính phụ thuộc thay đổi).

2. Khi nào nên sử dụng Computed Properties?

- Khi cần modify, format lại dữ liệu trước khi hiển thị

- Khi cần tối ưu hiệu suất: Computed properties được lưu trữ (cached) và chỉ tính toán lại khi các thuộc tính phụ thuộc thay đổi, giúp tiết kiệm tài nguyên.

- Khi cần xử lý logic phức tạp: Computed properties giúp bạn tách biệt logic phức tạp ra khỏi template, giúp cho code rõ ràng và dễ bảo trì.

3. Sự khác biệt giữa Computed, Methods và Watchers

- Computed Properties: Được lưu trữ và chỉ tính toán lại khi các thuộc tính phụ thuộc thay đổi. 

- Methods: Tính toán lại mỗi khi render, không lưu trữ. Dùng khi cần thực hiện hành động không lưu trữ hoặc không phụ thuộc vào dữ liệu cụ thể.

- Watchers: Dùng để theo dõi và thực thi các hành động khi dữ liệu thay đổi, phù hợp với các tác vụ bất đồng bộ hoặc deep watching.

4. Cách sử dụng Computed Properties trong Vue.js

Dưới đây là một ví dụ đơn giản để minh họa cách sử dụng computed properties:

Ví dụ: 

Giả sử bạn có một form nhập tên và họ, và bạn muốn hiển thị tên đầy đủ. Computed properties sẽ giúp bạn kết hợp hai giá trị này một cách hiệu quả.

<template>
  <div id="app">
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
    <p>BBMCode example. Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  name: 'FullNameComponent',
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Giải thích:

fullName là một computed property.

Nó kết hợp firstName và lastName để tạo ra một chuỗi tên đầy đủ.

Computed property fullName chỉ tính toán lại khi firstName hoặc lastName thay đổi, giúp tối ưu hóa hiệu suất.

5. Khi nào không nên sử dụng Computed Properties?

Khi bạn cần thực hiện các tác vụ bất đồng bộ hoặc theo dõi sự thay đổi sâu (deep watching) trên dữ liệu, computed properties không phải là lựa chọn tốt.

Trong những trường hợp này, sử dụng watchers sẽ phù hợp hơn.

6. Kết luận

Computed properties là một công cụ mạnh mẽ trong Vue.js, giúp cải thiện hiệu suất và dễ bảo trì code. Sử dụng computed properties khi cần thay đổi, kết hợp, hoặc format lại dữ liệu mà không cần tính toán lại liên tục.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về computed properties trong Vue.js và cách sử dụng nó một cách hiệu quả!