VueJS - Thuộc tính Tính toán: Hướng dẫn cho Người mới

Xin chào bạn, ngôi sao Vue.js tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các Thuộc tính Tính toán trong Vue.js. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ ngạc nhiên trước những gì bạn đã học được!

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

Hãy tưởng tượng bạn đang nướng bánh. Bạn có nguyên liệu (dữ liệu), và bạn theo một công thức (logic) để tạo ra điều gì đó delicious (thuộc tính tính toán). Trong Vue.js, các thuộc tính tính toán giống như những công thức bánh kỳ diệu tự động cập nhật mỗi khi nguyên liệu của chúng thay đổi!

Hãy bắt đầu với một ví dụ đơn giản:

<template>
<div>
<p>Tên Đầu: {{ firstName }}</p>
<p>Tên Sau: {{ lastName }}</p>
<p>Tên Đầy Đủ: {{ 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, fullName là thuộc tính tính toán của chúng ta. Nó giống như một công thức bánh thông minh kết hợp firstName và lastName để cho chúng ta một tên đầy đủ. Phần tốt nhất? Mỗi khi firstName hoặc lastName thay đổi, fullName sẽ tự động cập nhật!

Tại sao sử dụng Thuộc tính Tính toán?

1. Đơn giản: Chúng giúp giữ cho mẫu của bạn sạch sẽ và dễ đọc.
2. Hiệu suất: Vue lưu trữ kết quả và chỉ tính toán lại khi các phụ thuộc thay đổi.
3. Đáng tin cậy: Chúng tự động cập nhật khi các phụ thuộc thay đổi.

Thuộc tính Tính toán vs Phương thức

"Nhưng chờ đã," bạn có thể nói, "chúng ta không thể chỉ sử dụng phương thức thay thế sao?" Câu hỏi tuyệt vời! Hãy so sánh:

<template>
<div>
<p>Tính toán: {{ reversedMessage }}</p>
<p>Phương thức: {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

Cả reversedMessage và reverseMessage() đều làm cùng một điều. Nhưng đây là bí mật: các thuộc tính tính toán được lưu trữ trong bộ nhớ cache. Nếu message không thay đổi, reversedMessage sẽ không tính toán lại. Nó giống như có một trợ lý siêu hiệu quả nhớ kết quả trước!

Thuộc tính Tính toán với Phụ thuộc

Thuộc tính tính toán tỏa sáng khi chúng phụ thuộc vào nhiều piece của dữ liệu. Hãy xem một ví dụ phức tạp hơn:

<template>
<div>
<input v-model="searchQuery" placeholder="Tìm kiếm todos">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: 'Học Vue', completed: false },
{ id: 2, text: 'Xây dựng một ứng dụng', completed: true },
{ id: 3, text: 'Thành thạo thuộc tính tính toán', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

Ở đây, filteredTodos giống như một bộ lọc thông minh. Nó theo dõi cả todos và searchQuery. Khi một trong hai thay đổi, nó cập nhật danh sách tự động. Thật kỳ diệu phải không?

Get/Set trong Thuộc tính Tính toán

Bây giờ, hãy nâng cấp! Các thuộc tính tính toán có thể có cả getter và setter. Nó giống như có một công thức hai chiều - bạn có thể đọc kết quả và thay đổi nguyên liệu!

<template>
<div>
<p>Tên Đầy Đủ: {{ fullName }}</p>
<button @click="changeFullName">Thay đổi Tên</button>
</div>
</template>

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

Trong ví dụ này, fullName không chỉ là một công thức (getter) mà còn là một công thức ngược (setter). Khi chúng ta thay đổi fullName, nó tự động cập nhật firstName và lastName. Nó giống như có một bình thuốc thay đổi tên kỳ diệu!

Phương thức Thuộc tính Tính toán

Hãy kết thúc với bảng các phương thức phổ biến bạn có thể sử dụng trong thuộc tính tính toán:

Phương thức	Mô tả	Ví dụ
filter()	Tạo một mảng mới với các phần tử vượt qua một bài kiểm tra	this.items.filter(item => item.price > 100)
map()	Tạo một mảng mới bằng cách chuyển đổi mỗi phần tử	this.items.map(item => item.name.toUpperCase())
reduce()	Giảm một mảng xuống một giá trị duy nhất	this.items.reduce((total, item) => total + item.price, 0)
sort()	Sắp xếp các phần tử của một mảng	this.items.sort((a, b) => a.price - b.price)
includes()	Kiểm tra xem một mảng có chứa một phần tử nhất định hay không	this.items.includes('apple')
find()	Trả về phần tử đầu tiên vượt qua một bài kiểm tra	this.items.find(item => item.id === 3)

Nhớ rằng, các phương thức này không thay đổi mảng gốc, điều này hoàn hảo cho các thuộc tính tính toán!

Và thế là xong, các bạn học hỏi siêng năng! Bạn đã vừa thành thạo nghệ thuật của các thuộc tính tính toán trong Vue.js. Từ các phép toán đơn giản đến các bộ lọc phức tạp, bạn bây giờ có quyền lực để làm cho các ứng dụng Vue của bạn thông minh và hiệu quả hơn. Hãy tiếp tục thực hành, tiếp tục lập trình, và quan trọng nhất, hãy tiếp tục vui vẻ với Vue!

Credits: Image by storyset