Chào mừng đến với Cafedev! Trong thế giới lập trình web ngày nay, VueJS đã trở thành một công cụ quan trọng, đặc biệt là trong việc xử lý tính toán và quản lý trạng thái. Trong bài viết này, chúng ta sẽ cùng khám phá về tính năng Computed Properties trong VueJS. Tính năng này giúp chúng ta dễ dàng tính toán và theo dõi các giá trị phức tạp dựa trên trạng thái hiện tại của ứng dụng. Hãy cùng tìm hiểu và áp dụng tính năng này vào dự án của bạn trên Cafedev ngay!
Nội dung chính
1. Ví dụ cơ bản
Các biểu thức trong-template rất tiện lợi, nhưng chúng được dành cho các hoạt động đơn giản. Đặt quá nhiều logic trong các template có thể làm cho chúng trở nên phình to và khó bảo trì. Ví dụ, nếu chúng ta có một đối tượng với một mảng lồng nhau:
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})Và chúng ta muốn hiển thị các thông báo khác nhau tùy thuộc vào việc author đã có sách hay chưa:
<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>Tại thời điểm này, template đang trở nên hơi lộn xộn. Chúng ta phải nhìn vào đó một chút trước khi nhận ra rằng nó thực hiện một phép tính tùy thuộc vào author.books. Quan trọng hơn, chúng ta có thể không muốn lặp lại bản thân nếu chúng ta cần bao gồm phép tính này trong template nhiều hơn một lần.
Đó là lý do tại sao cho logic phức tạp mà bao gồm dữ liệu phản ứng, nên sử dụng một computed property. Dưới đây là cùng một ví dụ, đã được tái cấu trúc:
<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})
// a computed ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
<template>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</template>Thử nghiệm ở Playground
Ở đây, chúng ta đã khai báo một computed property publishedBooksMessage. Hàm computed() mong đợi được truyền vào một hàm getter, và giá trị trả về là một computed ref. Tương tự như refs thông thường, bạn có thể truy cập kết quả computed như publishedBooksMessage.value. Computed refs cũng tự động giải gói trong các template để bạn có thể tham chiếu đến chúng mà không cần .value trong các biểu thức template.
Một computed property tự động theo dõi các phụ thuộc phản ứng của nó. Vue hiểu rằng việc tính toán publishedBooksMessage phụ thuộc vào author.books, vì vậy nó sẽ cập nhật bất kỳ ràng buộc nào phụ thuộc vào publishedBooksMessage khi author.books thay đổi.
Xem thêm: Typing Computed Properties
2. Cached Computed vs. Methods
Bạn có thể đã nhận ra chúng ta có thể đạt được kết quả tương tự bằng cách gọi một phương thức trong biểu thức:
<p>{{ calculateBooksMessage() }}</p>// in component
function calculateBooksMessage() {
return author.books.length > 0 ? 'Yes' : 'No'
}Thay vì sử dụng một computed property, chúng ta có thể định nghĩa cùng một hàm như một phương thức. Đối với kết quả cuối cùng, hai phương pháp thực sự hoàn toàn giống nhau. Tuy nhiên, sự khác biệt là computed properties được lưu vào bộ nhớ cache dựa trên các phụ thuộc phản ứng của chúng. Một computed property chỉ sẽ đánh giá lại khi một số trong số các phụ thuộc phản ứng của nó đã thay đổi. Điều này có nghĩa là miễn là author.books không thay đổi, việc truy cập nhiều lần vào publishedBooksMessage sẽ ngay lập tức trả về kết quả đã tính toán trước đó mà không cần chạy lại hàm getter.
Điều này cũng có nghĩa là computed property sau sẽ không bao giờ cập nhật, vì Date.now() không phải là một phụ thuộc phản ứng:
const now = computed(() => Date.now())So với đó, việc gọi phương thức sẽ luôn luôn chạy hàm mỗi khi một lần render lại xảy ra.”
Tại sao chúng ta cần caching? Hãy tưởng tượng chúng ta có một computed property đắt giá list, cần lặp qua một mảng lớn và thực hiện rất nhiều phép tính. Sau đó, chúng ta có thể có các computed properties khác phụ thuộc vào list. Nếu không có caching, chúng ta sẽ thực thi getter của list nhiều lần hơn là cần thiết! Trong những trường hợp không muốn sử dụng caching, hãy sử dụng một cuộc gọi phương thức thay thế.
3. Computed Writable
Computed properties mặc định chỉ có getter. Nếu bạn cố gắng gán một giá trị mới cho một computed property, bạn sẽ nhận được cảnh báo thời gian chạy. Trong những trường hợp hiếm hoi mà bạn cần một computed property “writable”, bạn có thể tạo một computed property bằng cách cung cấp cả getter và setter:
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getter
get() {
return firstName.value + ' ' + lastName.value
},
// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[firstName.value, lastName.value] = newValue.split(' ')
}
})
</script>Bây giờ khi bạn chạy this.fullName = 'John Doe', setter sẽ được gọi và this.firstName và this.lastName sẽ được cập nhật tương ứng.
4. Thực hành tốt nhất
4.1 Getters nên không có tác động phụ
Quan trọng là phải nhớ rằng các hàm getter computed chỉ nên thực hiện tính toán thuần túy và không có tác động phụ. Ví dụ, đừng biến đổi trạng thái khác, thực hiện các yêu cầu async, hoặc biến đổi DOM bên trong một hàm getter computed! Hãy nghĩ về một computed property như là mô tả một cách phát biểu làm thế nào để tạo ra một giá trị dựa trên các giá trị khác – trách nhiệm duy nhất của nó chỉ nên là tính toán và trả về giá trị đó. Sau này trong hướng dẫn, chúng ta sẽ thảo luận về cách thực hiện các tác động phụ đối với các thay đổi trạng thái với watchers.
4.2 Tránh biến đổi giá trị computed
Giá trị trả về từ một thuộc tính tính toán là trạng thái phụ thuộc. Hãy nghĩ về nó như là một bức ảnh tạm thời – mỗi khi trạng thái nguồn thay đổi, một bức ảnh mới được tạo ra. Việc thay đổi một bức ảnh tạm thời không có ý nghĩa, vì vậy một giá trị trả về từ tính toán nên được coi là chỉ có thể đọc và không bao giờ được thay đổi – thay vào đó, cập nhật trạng thái nguồn mà nó phụ thuộc để kích hoạt tính toán mới.
Như vậy, đó là một cái nhìn tổng quan về tính năng Computed Properties trong VueJS trên Cafedev. Hy vọng rằng sau bài viết này, bạn đã hiểu rõ hơn về cách sử dụng tính năng này để tính toán và theo dõi trạng thái của ứng dụng VueJS của mình. Hãy thực hành và khám phá thêm về tính năng này để tận dụng tối đa sức mạnh của VueJS trong dự án của bạn trên Cafedev. Chúng tôi luôn chào đón bạn quay lại để khám phá thêm nhiều kiến thức hữu ích khác!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
