VueJS 2: Tìm hiểu Watchers - VueJS 2x căn bản

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 Zaidap.com.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.

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.