Hướng dẫn đơn giản về Vue.js Computed Properties

Vue.js cung cấp một tính năng mạnh mẽ có tên là computed properties cho phép bạn thực hiện các phép tính và lấy dữ liệu từ trạng thái của thành phần. Computed properties đặc biệt hữu ích khi bạn muốn thực hiện các phép tính hoặc chuyển đổi phức tạp dựa trên các thuộc tính dữ liệu phản ứng trong khi vẫn giữ cho mã mẫu của bạn sạch sẽ và dễ đọc.

Trong hướng dẫn này, chúng ta sẽ khám phá những điều cơ bản về computed properties trong Vue.js, sự khác biệt giữa chúng với các phương thức và cách sử dụng chúng hiệu quả trong các thành phần Vue của bạn.

Thuộc tính tính toán là gì?

Thuộc tính tính toán là các hàm được định nghĩa trong đối tượng computed của thành phần Vue. Không giống như các phương thức, thuộc tính tính toán được lưu trữ đệm dựa trên các phụ thuộc của chúng. Điều này có nghĩa là chúng sẽ chỉ đánh giá lại khi một trong các phụ thuộc của chúng thay đổi, khiến chúng hiệu quả hơn cho các hoạt động tốn kém.

Sau đây là một ví dụ cơ bản về thành phần Vue sử dụng thuộc tính được tính toán:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Trong ví dụ này, thuộc tính tính toán fullName kết hợp các thuộc tính dữ liệu firstName và lastName để trả về tên đầy đủ. Vì fullName là thuộc tính tính toán, nên nó sẽ tự động cập nhật bất cứ khi nào firstName hoặc lastName thay đổi.

Thuộc tính tính toán so với Phương pháp

Thoạt nhìn, computed properties có vẻ giống với methods, vì cả hai đều có thể được sử dụng để thực hiện tính toán và trả về kết quả. Tuy nhiên, có một điểm khác biệt chính giữa hai cái này:

Phương pháp: Các phương pháp được đánh giá lại mỗi lần chúng được gọi. Điều này có nghĩa là chúng không lưu trữ kết quả và có thể kém hiệu quả hơn nếu chúng tốn kém về mặt tính toán.
Thuộc tính tính toán: Thuộc tính tính toán được lưu trữ đệm dựa trên sự phụ thuộc của chúng và chỉ đánh giá lại khi những sự phụ thuộc đó thay đổi. Điều này làm cho chúng hiệu quả hơn đối với các tình huống mà bạn có các phép tính tốn kém.

Ví dụ, nếu chúng ta sử dụng một phương thức thay vì một thuộc tính được tính toán để tính toán tên đầy đủ, phương thức đó sẽ được gọi mỗi khi mẫu được hiển thị. Với một thuộc tính được tính toán, phương thức đó chỉ được tính toán lại khi một trong các phụ thuộc của nó thay đổi.

Sử dụng Getters và Setters với Computed Properties

Thuộc tính được tính toán cũng có thể có getters và setters. Theo mặc định, thuộc tính được tính toán chỉ có một getter, nhưng bạn có thể thêm một setter để xử lý các bản cập nhật dữ liệu.

Sau đây là ví dụ về thuộc tính được tính toán với cả phương thức lấy và phương thức đặt:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

Trong ví dụ này, thuộc tính được tính toán fullName có một hàm lấy trả về tên đầy đủ và một hàm đặt chia tách tên đã nhập và cập nhật các thuộc tính dữ liệu firstName và lastName.

Phản ứng trong các thuộc tính được tính toán

Thuộc tính được tính toán có tính phản ứng và sẽ tự động cập nhật khi các phụ thuộc của chúng thay đổi. Ví dụ, nếu bạn thay đổi giá trị của firstName hoặc lastName, thuộc tính được tính toán fullName sẽ tự động cập nhật để phản ánh giá trị mới.

Sau đây là một ví dụ chứng minh khả năng phản ứng này:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Trong ví dụ này, khi nhấp vào nút, firstName sẽ được đổi thành "Jane" và thuộc tính được tính toán fullName sẽ tự động cập nhật thành "Jane Doe".

Thực hành tốt nhất để sử dụng Thuộc tính được tính toán

Sử dụng các thuộc tính được tính toán cho các phép tính tốn kém dựa trên dữ liệu phản ứng.
Giữ cho các thuộc tính được tính toán đơn giản và tập trung vào việc trả về giá trị.
Tránh các tác dụng phụ bên trong các thuộc tính được tính toán; thay vào đó hãy sử dụng các phương thức nếu bạn cần thực hiện các hành động.
Sử dụng getter và setter cho các thuộc tính được tính toán khi bạn cần xử lý cả việc đọc và ghi dữ liệu.
Đảm bảo các phụ thuộc của thuộc tính được tính toán có tính phản ứng; nếu không, chúng sẽ không cập nhật chính xác.

Phần kết luận

Thuộc tính tính toán là một tính năng mạnh mẽ của Vue.js cho phép bạn giữ cho mã của mình sạch sẽ, hiệu quả và dễ bảo trì. Chúng giúp bạn lấy dữ liệu từ các thuộc tính phản ứng khác và tự động cập nhật khi các phụ thuộc thay đổi. Bằng cách hiểu cách sử dụng thuộc tính tính toán hiệu quả, bạn có thể xây dựng các ứng dụng Vue.js mạnh mẽ và hiệu suất hơn.

đã tính toán thuộc tính vue phản ứng getter setter bộ nhớ đệm hiệu suất dữ liệu phương pháp ví dụ hướng dẫn cập nhật hiệu quả