- Hiểu sự khác nhau giữa computed và watch
- Biết khi nào nên dùng cái nào
- Làm ví dụ tính họ tên đầy đủ, và theo dõi biến count thay đổi
| Tiêu chí | computed | watch |
|---|
| Hoạt động | Trả về giá trị mới khi dữ liệu liên quan thay đổi | Theo dõi thay đổi của biến, để thực hiện hành động phụ |
| Dùng để | Hiển thị giá trị đã xử lý | Gửi API, log, kiểm tra điều kiện… |
| Có cache không? | ✅ Có cache (chỉ tính lại khi cần) | ❌ Không cache |
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Vue Computed & Watch</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
font-family: Arial;
display: flex;
gap: 30px;
padding: 20px;
}
.code {
width: 50%;
}
.output {
width: 50%;
border-left: 2px solid #ccc;
padding-left: 20px;
}
input {
padding: 5px;
margin: 5px 0;
}
.log {
font-style: italic;
color: gray;
}
</style>
</head>
<body>
<div class="code">
<h2>Mã nguồn Vue:</h2>
<pre><code><div id="app">
<!-- 1. Computed: Họ tên đầy đủ -->
<h3>Họ:</h3>
<input v-model="firstName">
<h3>Tên:</h3>
<input v-model="lastName">
<p><strong>Họ tên đầy đủ:</strong> {{ fullName }}</p>
<!-- 2. Watch: Theo dõi biến count -->
<h3>Bộ đếm: {{ count }}</h3>
<button @click="count++">Tăng</button>
<p class="log">Log: {{ logMessage }}</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
firstName: '',
lastName: '',
count: 0,
logMessage: ''
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
count(newVal, oldVal) {
this.logMessage = `Giá trị count thay đổi từ ${oldVal} → ${newVal}`;
}
}
}).mount('#app')
</script>
</code></pre>
</div>
<div class="output">
<h2>Kết quả hiển thị:</h2>
<div id="app">
<!-- Computed -->
<h3>Họ:</h3>
<input v-model="firstName">
<h3>Tên:</h3>
<input v-model="lastName">
<p><strong>Họ tên đầy đủ:</strong> {{ fullName }}</p>
<!-- Watch -->
<h3>Bộ đếm: {{ count }}</h3>
<button @click="count++">Tăng</button>
<p class="log">Log: {{ logMessage }}</p>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
firstName: '',
lastName: '',
count: 0,
logMessage: ''
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
count(newVal, oldVal) {
this.logMessage = `Giá trị count thay đổi từ ${oldVal} → ${newVal}`;
}
}
}).mount('#app')
</script>
</body>
</html>
| Câu lệnh | Tác dụng |
|---|
computed: { fullName() { ... } } | Trả về họ tên đầy đủ khi firstName hoặc lastName thay đổi |
watch: { count(newVal, oldVal) { ... } } | Theo dõi count mỗi khi thay đổi, cập nhật log |
- Dùng
computed tạo biến greeting → trả về "Xin chào, fullName!"
- Dùng
watch theo dõi firstName, nếu đổi thì log "Bạn đã đổi họ!"
- Đếm số lần
count thay đổi và hiển thị tổng số lần đó
Thảo luận