Giới thiệu về Thuộc tính Tính toán trong Vue.js
Các thuộc tính được tính toán được dùng để tính toán nhanh các thuộc tính được hiển thị trong dạng xem. Các phép tính này sẽ được lưu vào bộ nhớ đệm và chỉ cập nhật khi cần thiết.
Có nhiều cách trong Vue để đặt giá trị cho chế độ xem. Điều này bao gồm liên kết trực tiếp giá trị dữ liệu với chế độ xem, sử dụng các biểu thức đơn giản hoặc sử dụng bộ lọc để thực hiện các chuyển đổi đơn giản trên nội dung. Ngoài ra, ta có thể sử dụng các thuộc tính được tính toán để tính toán giá trị hiển thị dựa trên một giá trị hoặc một bộ giá trị trong mô hình dữ liệu.
Thuộc tính tính toán
Các thuộc tính được tính toán cho phép ta tính toán các giá trị phức tạp, cụ thể cho mô hình cho chế độ xem. Các giá trị này sẽ được ràng buộc với các giá trị phụ thuộc và chỉ cập nhật khi được yêu cầu.
Ví dụ, ta có thể có một mảng kết quả chủ đề trong mô hình dữ liệu:
data() {
return {
results: [
{
name: 'English',
marks: 70
},
{
name: 'Math',
marks: 80
},
{
name: 'History',
marks: 90
}
]
}
}
Giả sử rằng ta muốn xem tổng số cho tất cả các môn học. Ta không thể sử dụng bộ lọc hoặc biểu thức cho tác vụ này.
- Bộ lọc được sử dụng để định dạng dữ liệu đơn giản và cần thiết ở nhiều nơi trong ứng dụng.
- Biểu thức không cho phép sử dụng hoạt động stream hoặc logic phức tạp khác. Chúng nên được giữ đơn giản.
Đây là nơi các thuộc tính được tính toán có ích. Ta có thể thêm một giá trị được tính toán vào mô hình như sau:
computed: {
totalMarks: function() {
let total = 0;
for(let i = 0; i < this.results.length; i++){
total += parseInt(this.results[i].marks);
}
return total;
}
}
totalMarks tính totalMarks tính toán tổng số điểm bằng cách sử dụng mảng results . Nó chỉ đơn giản lặp lại các giá trị và trả về tổng phụ.
Sau đó, ta có thể hiển thị giá trị được tính trong dạng xem:
<div id="app">
<div v-for="subject in results">
<input v-model="subject.marks">
<span>
Marks for {{ subject.title }}: {{ subject.marks }}
</span>
</div>
<span>
Total marks are: {{ totalMarks }}
</span>
</div>
Thuộc tính tính toán so với phương thức?
Ta có thể nhận được cùng một kết quả bằng cách sử dụng một phương pháp xuất ra tổng số.
Thay vì có hàm totalMarks trong phần được tính toán , ta có thể di chuyển nó vào các phương thức và trong dạng xem, ta có thể thay đổi mẫu để thực thi phương thức:
<span>
Total marks are: {{ totalMarks() }}
</span>
Mặc dù điều này cho cùng một kết quả , nhưng ta đang tính đến hiệu suất. Sử dụng cú pháp này, phương thức totalMarks() được thực thi mỗi khi trang hiển thị (tức là: với mọi thay đổi).
Thay vào đó, nếu ta có thuộc tính được tính toán, Vue sẽ nhớ các giá trị mà thuộc tính được tính phụ thuộc vào (ví dụ: Trong ví dụ trước, đó sẽ là results ). Bằng cách đó, Vue chỉ có thể tính toán các giá trị nếu phần phụ thuộc thay đổi. Nếu không, các giá trị đã lưu trong bộ nhớ cache trước đó sẽ được trả về.
Bởi vì điều này, hàm phải là một hàm thuần túy . Nó không thể có tác dụng phụ. Đầu ra chỉ được phụ thuộc vào các giá trị được truyền vào hàm.
Bộ định vị điện toán
Theo mặc định, các thuộc tính được tính toán chỉ hiển thị một getter. Tuy nhiên, cũng có thể có người định vị.
computed: {
fullName: {
get: function() {
return this.firstName + this.lastName;
},
set: function(value) {
let names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
Bằng cách có cả getters và setters, ta có thể liên kết giá trị đầu vào một cách chính xác với mô hình. Nếu ta đặt fullName trong một phương thức, chuỗi truyền vào sẽ được chia thành họ và tên.
Lời về người theo dõi
Mặc dù các thuộc tính được tính toán có thể là đủ trong hầu hết các trường hợp, những người theo dõi cung cấp một mức kiểm soát bổ sung bằng cách cho phép ta lắng nghe các thay đổi đối với một thuộc tính.
Watchers, như tên cho thấy, cho phép ta theo dõi những thay đổi trong một đối tượng mô hình. Mặc dù có thể sử dụng các trình theo dõi để nhận được kết quả giống như các giá trị được tính toán, nhưng nó thường phức tạp và đắt tiền hơn.
Ta có thể sử dụng trình theo dõi cho các yêu cầu phức tạp hơn, ví dụ:
- Hoạt động không đồng bộ
- Đặt giá trị trung gian
- Giới hạn số lần một thao tác được gọi (ví dụ: Bỏ sót một sự kiện đầu vào)
Các tin liên quan
