Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng VueJS 2: Tìm hiểu Watchers
Trong bài này chúng ta sẽ tìm hiểu về Vue Watcher, đây là cách để bạn can thiệp vào những thay đổi của dữ liệu trong Vue. Ví dụ khi bạn xây dựng ứng dụng quản lý sinh viên và tại chứ năng sửa sinh viên bạn muốn mỗi khi tên của sinh viên bị thay đổi thì sẽ thực hiện gọi ngầm một tác vụ hiển thị log cho admin thì watcher rất cần thiết.
1. Vue Watcher là gì?
Dịch từ tiếng Anh sang tiếng Việt thôi cũng đủ để nói lên ý nghĩa của phần này, watcher có nghĩa là người trông coi những thay đổi của dữ liệu trong VueJS. Watcher sẽ nhận biết được khi nào thì dữ liệu được thay đổi và nếu cần thiết thì sẽ can thiệp vào quá trình thay đổi đó.
Về cú pháp thì mỗi data sẽ khai báo một watcher như sau:
var vm = new Vue({
el: '#example',
data: {
message : "Học VueJS Watchers tại freetuts.net"
},
watch : {
message : function(newValue){
console.log("Giá trị của message được thay đổi");
}
}
});
// Thay đổi giá trị của message
// nêu bạn bật console.log lên thì sẽ thấy một dòng thông báo là:
// Giá trị của message được thay đổi
vm.message = "Văn Cường";
2. Watcher và Computed Properties
Xét về tính năng thì mỗi component sẽ có những nhiệm vụ khác nhau, tuy nhiên việc sử dụng như thế nào thì phụ thuộc vào sở thích và kinh nghiệm của lập trình viên. Xét ví dụ dưới đây tại trang chủ của Vue.
Bài viết này được đăng tại [free tuts .net]
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val;
}
}
});Với cách viết này thì mỗi khi có sự thay đổi giá trị của firstName hoặc lastName thì fullName cũng được thay đổi theo, tuy nhiên code hơi rườm rà bởi mục đích của ta là lấy fullName nên có thể sử dụng Computed để thay thế.
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});Như vậy mỗi khi muốn lấy fullName thì chỉ cần gọi vm.fullName là được.
3. Lời kết
Như vậy watch là cơ chế trông đợi và có thể bổ sung những chức năng vào mỗi khi dữ liệu có thay đổi. Nếu mang so sánh giữa computed và watcher thì ta thấy mỗi component có nhũng nhiệm vụ khác nhau hoàn toàn nên việc sử dụng cái nào sẽ phụ thuộc vào sở thích và kinh nghiệm của lập trình viên.
