GIỚI THIỆU
CĂN BẢN
NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

Code
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";

watcher vuejs 01 png

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]

Code
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ế.

Code
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.

Cùng chuyên mục:

VueJS 2: Conditional Rendering (v-if và v-show)

VueJS 2: Conditional Rendering (v-if và v-show)

Trong bài này chúng ta sẽ tìm hiểu một số directive có nhiệm vụ xử…

VueJS 2: Binding Class và Binding Style

VueJS 2: Binding Class và Binding Style

Trong bài này chúng ta sẽ tìm hiểu cơ chế ràng buộc dữ liệu (binding…

VueJS2: Computed Properties

VueJS2: Computed Properties

Computed Properties dịch sang tiếng Việt rất khó hiểu nên mình sẽ dùng từ này…

VueJS 2: Tìm hiểu Methods

VueJS 2: Tìm hiểu Methods

Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình…

VueJS 2: Template Syntax

VueJS 2: Template Syntax

Giống như những thư viện Javascript khác, việc xử lý template chủ yếu dựa vào…

VueJS 2: Tìm hiểu Vue Instance

VueJS 2: Tìm hiểu Vue Instance

Instance trong lập trình chính là thể hiện của một lớp. Ví dụ nếu bạn…

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

Trong bài này mình sẽ cùng các bạn tìm hiểu cách cài đặt và viết…

VueJS là gì?

VueJS là gì?

Hôm nay chúng ta lại tiếp tục tìm hiểu một thư viện Javascript mới, hay…

Top