Trong Vue.js, computed property là một công cụ mạnh mẽ giúp bạn tính toán giá trị dựa trên dữ liệu hiện có trong model của ứng dụng của bạn.

Computed property cho phép bạn định nghĩa các thuộc tính phức tạp mà được tính toán dựa trên các giá trị khác trong model, và nó sẽ tự động được cập nhật mỗi khi các giá trị đó thay đổi. Điều này giúp bạn giảm bớt lượng mã lặp lại và tạo ra các tính toán phức tạp một cách dễ dàng và hiệu quả.

Chúng ta sẽ khám phá sâu hơn về cách sử dụng computed property trong Vue.js, cách định nghĩa và sử dụng chúng để tính toán và hiển thị dữ liệu một cách linh hoạt và tiện lợi. Chúng ta cũng sẽ tìm hiểu về các trường hợp sử dụng phổ biến và lợi ích mà computed property mang lại cho việc phát triển ứng dụng Vue.js của bạn.

Computed property giống như một thuộc tính được tính toán, và bạn có thể truy cập nó như một thuộc tính thông thường.

Sẵn sàng để bắt đầu khám phá sức mạnh của computed property và biến cách bạn làm việc với dữ liệu trong ứng dụng của mình? Hãy cùng nhau tiếp tục nhé!

Chắc các bạn vẫn còn nhớ ở bài trước chúng ta sử dụng một phương thức để bind data, khi một event khác thực thi nó vẫn gọi vào phương thức đó để thực thi bạn nào chưa hiểu đoạn này thì có thể quay về bài trước để đọc nhé, nó làm cho hiệu suất của ứng dụng không cao đúng ko nào? Vậy thì hôm nay chúng ta sẽ cùng nhau đi vào một ví dụ sử dụng computed property xem nó giải quyết vấn đề này như thế nào?

Để sử dụng computed property trong Vue.js, bạn cần làm hai bước chính: Định nghĩa computed property và sử dụng nó trong template của bạn.

1. Định Nghĩa Computed Property:

Bạn có thể định nghĩa computed property trong phần computed của đối tượng Vue. Mỗi computed property là một hàm có trả về giá trị mà bạn muốn tính toán.

Ví dụ, hãy tính tổng của một mảng numbers:

new Vue({
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    total: function() {
      return this.numbers.reduce((acc, val) => acc + val, 0);
    }
  }
});

Trong đoạn mã trên, total là computed property tính tổng của các số trong mảng numbers.

2. Sử Dụng Computed Property Trong Template:

Bạn có thể sử dụng computed property trong template của bạn bằng cách gọi tên của nó giống như bạn gọi một thuộc tính dữ liệu.

Ví dụ, bạn có thể hiển thị tổng tính toán trong template như sau:

<div id="app">
  <p>Tổng: {{ total }}</p>
</div>​

Khi Vue.js chạy, computed property total sẽ tự động tính toán và cập nhật mỗi khi các giá trị phụ thuộc thay đổi, đảm bảo rằng dữ liệu hiển thị trong template luôn là phiên bản mới nhất.

Đó là cách bạn sử dụng computed property trong Vue.js để tính toán và hiển thị dữ liệu một cách linh hoạt và tiện lợi.

Mình lấy thêm một ví dụ nữa:

<section id="event">
  <p>{{ getStatusMessage }}</p>
  <button @click="setStatus('active')">Kích hoạt</button>
  <button @click="setStatus('inactive')">Vô hiệu hóa</button>
</section>

const app = Vue.createApp({
    data() {
        return {
            status: 'inactive',
        }
    },
    computed: {
        getStatusMessage: function() {
            return this.status === 'active' ? 'Thiết bị đã được kích hoạt' : 'Thiết bị không hoạt động'; 
        },
    },
    methods: {
        setStatus(newStatus) { 
            this.status = newStatus;
        },
    },
})
app.mount('#event');

Các Trường Hợp Sử Dụng Phổ Biến và Lợi Ích:

1. Tính toán giá trị từ dữ liệu hiện có: Computed property giúp tính toán giá trị dựa trên dữ liệu hiện có trong model của ứng dụng, giúp bạn hiển thị dữ liệu phức tạp một cách dễ dàng.

2. Lọc và Sắp xếp dữ liệu: Bạn có thể sử dụng computed property để lọc hoặc sắp xếp dữ liệu theo các tiêu chí khác nhau mà không cần phải thay đổi dữ liệu gốc.

3. Định dạng dữ liệu hiển thị: Computed property cũng có thể được sử dụng để định dạng dữ liệu hiển thị, chẳng hạn như đổi định dạng ngày tháng hoặc tiền tệ.

4. Hiệu suất tốt hơn: Vì computed property chỉ tính toán lại khi cần thiết, nên nó giúp cải thiện hiệu suất của ứng dụng bằng cách tránh tính toán không cần thiết.

5. Clean code và dễ bảo trì: Computed property giúp mã của bạn trở nên sạch sẽ và dễ bảo trì hơn bằng cách tách biệt logic tính toán từ logic hiển thị.

Tóm lại, computed property là một công cụ mạnh mẽ trong Vue.js giúp bạn tính toán và hiển thị dữ liệu một cách linh hoạt và tiện lợi, đồng thời cung cấp lợi ích về hiệu suất và bảo trì mã.

Chú ý: Bạn vẫn nên rằng buộc Event của các bạn với phương thức, bạn không rằng buộc Event với computed property, bạn chỉ dùng computed property KHI tính toán và hiển thị kết quả lên giao diện.

Có thể bạn chưa biết?

Cách mà Computed property hoạt động 

Computed property trong Vue.js hoạt động bằng cách tính toán giá trị chỉ khi nó cần thiết và lưu trữ kết quả tính toán để sử dụng lại khi các giá trị phụ thuộc không thay đổi. Điều này giúp cải thiện hiệu suất của ứng dụng bằng cách tránh tính toán không cần thiết.

Khi bạn truy cập một computed property trong template hoặc trong code JavaScript, Vue.js sẽ kiểm tra xem có bất kỳ giá trị nào đã được tính toán trước đó không. Nếu computed property chưa được tính toán hoặc các giá trị phụ thuộc đã thay đổi, Vue.js sẽ tính toán giá trị mới và lưu trữ kết quả.

Một khi computed property đã được tính toán và các giá trị phụ thuộc không thay đổi, Vue.js sẽ sử dụng kết quả đã tính toán trước đó từ bộ nhớ cache thay vì tính toán lại. Điều này giúp giảm thiểu chi phí tính toán và tăng hiệu suất của ứng dụng.

Khi các giá trị phụ thuộc thay đổi, computed property sẽ tự động tính toán lại giá trị mới và cập nhật bộ nhớ cache với kết quả mới. Điều này đảm bảo rằng dữ liệu hiển thị trong giao diện người dùng luôn là phiên bản mới nhất.

Tóm lại, computed property trong Vue.js sử dụng cache để lưu trữ kết quả tính toán và tái sử dụng nó khi các giá trị phụ thuộc không thay đổi, giúp cải thiện hiệu suất của ứng dụng.