VueJS - Watch Property: A Beginner's Guide

Xin chào bạn, ngôi sao Vue.js tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng mạnh mẽ nhất của Vue: Thuộc tính Watch. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ hướng dẫn bạn từng bước trong hành trình này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu nhé!

What is the Watch Property?

Trước khi chúng ta nhảy vào mã, hãy hiểu Thuộc tính Watch là gì. Hãy tưởng tượng bạn đang giữ mắt trên chiếc bánh yêu thích của mình trong lò nướng. Bạn đang theo dõi nó kỹ lưỡng, sẵn sàng hành động nếu nó bắt đầu bị cháy hoặc nếu nó được nướng hoàn hảo. Đó chính xác là điều Thuộc tính Watch làm trong Vue.js - nó quan sát một thuộc tính dữ liệu cụ thể và phản ứng khi thuộc tính đó thay đổi.

Why Use the Watch Property?

Bạn có thể tự hỏi, "Tại sao chúng ta cần điều này?" Hãy để tôi kể cho bạn một câu chuyện ngắn. Một lần, tôi có một học sinh đang xây dựng một ứng dụng thời tiết. Anh ấy muốn hiển thị animation mưa mỗi khi thời tiết thay đổi thành "mưa". Thuộc tính Watch hoàn hảo cho điều này! Nó cho phép ứng dụng của anh ấy "theo dõi" dữ liệu thời tiết và kích hoạt animation khi cần thiết.

Bây giờ, hãy cùng xem cách chúng ta có thể sử dụng tính năng mạnh mẽ này trong các ứng dụng Vue.js của mình.

Basic Syntax of Watch Property

Dưới đây là cấu trúc cơ bản của cách chúng ta định nghĩa một thuộc tính watch:

export default {
data() {
return {
// Your data properties here
}
},
watch: {
propertyToWatch(newValue, oldValue) {
// Your logic here
}
}
}

Đừng lo lắng nếu điều này trông có vẻ khó hiểu lúc này. Chúng ta sẽ phân tích nó với một số ví dụ thực tế.

Example 1: Watching a Simple Property

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một bộ đếm ghi một tin nhắn mỗi khi giá trị của nó thay đổi.

<template>
<div>
<p>Counter: {{ counter }}</p>
<button @click="counter++">Increment</button>
</div>
</template>

<script>
export default {
data() {
return {
counter: 0
}
},
watch: {
counter(newValue, oldValue) {
console.log(`The counter changed from ${oldValue} to ${newValue}`)
}
}
}
</script>

Trong ví dụ này:

1. Chúng ta có một thuộc tính counter được khởi tạo là 0.
2. Có một nút tăng giá trị của bộ đếm khi được nhấn.
3. Chúng ta đang theo dõi thuộc tính counter.
4. Mỗi khi counter thay đổi, hàm watch của chúng ta ghi một tin nhắn với giá trị cũ và mới.

Thử tăng bộ đếm vài lần và kiểm tra console của trình duyệt. Bạn sẽ thấy các tin nhắn ghi mỗi thay đổi!

Example 2: Watching Nested Properties

Bây giờ, hãy nâng cấp một chút. Nếu chúng ta muốn theo dõi một thuộc tính nằm trong một đối tượng? Vue.js có thể làm được với deep watching.

<template>
<div>
<p>User's Name: {{ user.name }}</p>
<input v-model="user.name" />
</div>
</template>

<script>
export default {
data() {
return {
user: {
name: 'John Doe'
}
}
},
watch: {
'user.name': {
handler(newName, oldName) {
console.log(`Name changed from ${oldName} to ${newName}`)
},
deep: true
}
}
}
</script>

Trong ví dụ này:

1. Chúng ta có một đối tượng user với thuộc tính name.
2. Chúng ta đang theo dõi user.name bằng cách sử dụng ký tự gạch nối.
3. Chúng ta đặt deep: true để đảm bảo Vue theo dõi các thuộc tính嵌套.
4. Hàm handler ghi một tin nhắn mỗi khi tên thay đổi.

Thử thay đổi tên trong trường nhập và theo dõi console để thấy các tin nhắn!

Example 3: Immediate Property Watching

Đôi khi, bạn muốn hàm watch của bạn chạy ngay lập tức khi được tạo ra, không chỉ khi giá trị thay đổi. Hãy xem chúng ta có thể làm điều đó như thế nào.

<template>
<div>
<p>Current Time: {{ currentTime }}</p>
</div>
</template>

<script>
export default {
data() {
return {
currentTime: new Date().toLocaleTimeString()
}
},
watch: {
currentTime: {
handler(newTime) {
console.log(`The time is now ${newTime}`)
},
immediate: true
}
},
created() {
setInterval(() => {
this.currentTime = new Date().toLocaleTimeString()
}, 1000)
}
}
</script>

Trong ví dụ này:

1. Chúng ta có một thuộc tính currentTime được cập nhật mỗi giây.
2. Thuộc tính watch của chúng ta có immediate: true, vì vậy nó chạy ngay khi thành phần được tạo ra.
3. Hàm handler ghi thời gian hiện tại mỗi khi nó thay đổi.

Bạn sẽ thấy thời gian hiện tại được ghi ngay lập tức, và sau đó một log mới mỗi giây!

Methods Table

Dưới đây là bảng tóm tắt các phương thức chúng ta đã sử dụng trong các ví dụ của mình:

Method	Description
watch	Định nghĩa các thuộc tính để theo dõi thay đổi
handler	Hàm chạy khi một thuộc tính được theo dõi thay đổi
deep	Kích hoạt theo dõi sâu cho các thuộc tính嵌套
immediate	Chạy hàm watch ngay lập tức khi thành phần được tạo ra

Conclusion

Và thế là bạn đã có nó, các học sinh yêu quý của tôi! Chúng ta đã khám phá thế giới kỳ diệu của Thuộc tính Watch trong Vue.js. Từ bộ đếm đơn giản đến các đối tượng嵌套 và theo dõi ngay lập tức, bạn现在已经 có sức mạnh để làm cho các ứng dụng Vue.js của mình trở nên phản ứng và động hơn.

Nhớ rằng Thuộc tính Watch giống như một người bảo vệ cảnh giác cho dữ liệu của bạn. Sử dụng nó một cách khôn ngoan, và nó sẽ phục vụ bạn tốt trong hành trình Vue.js của bạn. Như thường lệ, cách tốt nhất để học là làm, vì vậy tôi khuyến khích bạn thử nghiệm với các ví dụ này và tạo ra của riêng bạn. Ai biết được? Bạn có thể sẽ xây dựng nên điều lớn lao tiếp theo!

Chúc các bạn may mắn và thành công trong lập trình, và願 Vue luôn đồng hành cùng bạn! ??‍??‍?

Credits: Image by storyset