Watcher trong Vue.js

Bên cạnh Computed property Vue còn cung cấp 1 giải giáp để chúng ta có thể theo dõi sự thay đổi của dữ liệu và thực thi các hành động kèm theo. Giải pháp đó chính là sử dụng Watcher. Trong bài viết này chúng ta sẽ tìm hiểu về Watcher property trong Vuejs các bạn nhé!

1. Watcher là gì?

Đúng như tến gọi của nó Watcher trong Vue.js có nghĩa là theo dõi, trong Vuejs nó có nhiệm vụ theo dõi sự thay đổi của dữ liệu và thực thi hành động kèm theo.

Cú pháp sử dụng Watcher:

Để khai báo watcher trong vue.js thì các bạn cần phải tuân thủ 2 nguyên tắc sau:

• Tên của watcher phải trùng với tên của data cần theo dõi.
• Và các watcher phải được đặt trong watch scope.

Ví dụ sử dụng Watcher

Ví dụ dưới đây sẽ khai báo watcher name có nhiệm vụ alert (thông báo) nội dung của biến name mỗi khi nó thay đổi.

var app = new Vue({
    el: '#app',
    data: {
        name: 'Dao Duy Nam' //giá trị ban đầu.
    },
    watch: {
        name : function () {
            alert(this.name);
        }
    }
});
//thiết lập lại giá trị
app.name = "Hoc Vuejs Online tai HocTV";

Sử dụng code HTML bên dưới kết hợp với vuejs trên để chạy code 

<div id="app">
        <h1 class="text-red">{{
name }}</h1>
</div>

Kết quả như sau:

Sau khi các bạn chạy đoạn code trên thì ngay lập tức sẽ nhận được một alert với nội dung: "Hoc Vuejs Online tai HocTV" lý do là chúng ta đã thay đổi giá trị của bên name lúc đầu, nên lúc này watcher sẽ thực hiện nhiệm vụ là alert ra giá trị mới.

2. Computed vs Watcher.

Có thể thấy rằng computed và watcher đều được thực hiện khi chúng ta thay đổi data bên trong nó. Mặc dù cả hai đều có thể áp dụng để thực thi một hành động nào đó khi có 1 biến phụ thuộc thay đổi. Thế nhưng nên sử dụng component nào là một câu hỏi hơi khó. Dưới đây chúng ta sẽ cùng phân tích, so sánh computed và watcher qua ví dụ trên trang chủ của Vue các bạn nhé

Watcher

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Dao Duy',
        lastName: 'Nam',
        fullName: 'Dao Duy Nam'
    },
    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ế.

Computed

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Dao Duy',
        lastName: 'Nam'
    },
    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.

Lời kết

Tổng kết lại 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 2 component computed và watcher thì ta thấy mỗi component này đều 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.