VueJS

Watchers in VueJS

Watch in VueJS

1. Watchers trong VueJS là gì?

Nếu các bạn đã làm việc với Compoted rồi thì chắc các bạn đã biết đến nó sẽ run again khi data mà nó quan sát (xử lý) thay đổi.
Nhưng hãy đặt câu hỏi, nếu chúng ta muốn thay đổi Data properties khi nó changed mà không cần đến Compoted thì có được không? Thì câu trả lời là được nhé, VueJS cho ta 1 công cụ rất mạnh để làm việc này. Watchers có thể chạy khi ta thay đổi data, compoted hay props.
(This is so crazy ^^).

2. Một số điều mà bạn có thể làm với Watchers trong VueJS?

Điều đầu tiên, mình muốn khẳng định là VueJS là một Framework rất rất mạnh mẽ ở thời điểm hiện tại. Sẽ không để bạn phải chờ lâu hơn nữa, chúng ta sẽ cùng tìm hiểu thêm những tiện ích mà Watchers mang lại.



Nó có thể Watch nhưng thay đổi của Data properties mà ta muốn quan sát:

<template>
    <div class="my-component">
        <div> {{message}} </div>
        <div>
            <button @click="changeMessage">Click me</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "Hello world!"
            }
        },
        methods: {
            changeMessage() {
                this.message = "This is message";
            }
        },
        watch: {
            message() {
                console.log("Change message: ", this.message);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-component {
        color: rgb(40, 131, 104);
    }
</style>

Chúng ta có thể quan sát rất dễ dàng là thuộc tính trong Watchers phải trùng với thuộc tính trong Data properties, nếu chúng ta không viết như vậy thì VueJS không thể biết mà Watch cho chúng ta được.


Tiếp đến là Watchers cũng có thể watch những hàm mà ta viết trong Compoted properties. Nhưng cũng hãy chú ý là ta phải khái báo để VueJS biết mà theo dõi nhé.

<template>
    <div class="my-component">
        <div> {{ reverseMessage }} </div>
        <div><button @click="changeMessage">Click me</button></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: ""
            }
        },
        methods: {
            changeMessage() {
                this.message = "This is message.";
            }
        },
        compoted: {
            reverseMessage() {
                return this.message.split('').reverse().join('');
            }
        },
        watch: {
            reverseMessage() {
                console.log("Change message: ", this.message);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-component {
        color: rgb(40, 131, 104);
    }
</style>

Như ta có thể thấy ở bên trên, một lần nữa ta lại phải khai báo phương thức bên trong Watchers trùng với phương thức bên trong Compoted. Các bạn hãy nhớ thật kĩ điều cơ bản này nhé, cái gì sinh ra cũng đều có cái lý do của nó. ^^


Lại có bạn hỏi, ơ thế nhỡ mình muốn watch deep của thuộc tính Data properties thì làm như thế nào. Câu trả lời lại càng đơn giản ^^, bạn chỉ cần tạo ra 1 phương thức bên trong Compoted lắng nghe sự thay đổi của Data properties rồi bên trong Watchers lắng nghe lại phương thức Compoted này là được:

<template>
    <div class="my-component">
        <div>Message type: {{message.type}}</div>
        <div>Message text: {{message.text}}</div>
        <div><button @click="changeType">Change type</button></div>
        <div><button @click="changeText">Change text</button></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: {
                    type: "Greeting",
                    text: "How are you!"
                }
            }
        },
        methods: {
            changeType() {
                this.message.type = "This is new type.";
            },
            changeText() {
                this.message.text = "This is new text.";
            }
        },
        compoted: {
            getType() {
                return this.message.type;
            },
            getText() {
                return this.message.text;
            }
        },
        watch: {
            getType() {
                console.log("Change type: ", this.message.type);
            },
            getText() {
                console.log("Change text: ", this.message.text);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-component {
        color: rgb(40, 131, 104);
    }
</style>

Như trong đoạn code bên trên chắc hẳn nhiều bạn đã hiểu rồi đúng không nào. ^^

3. Kết luận.

Nếu so với React hay Angular thì VueJS ở phần này là nổi trội hơn hẳn ở góc độ làm cho Developer cảm thấy cuộc sống dễ dàng hơn ^^.

4. Tham khảo.

# Bài 6: Sử dụng watcher trong VueJS
# Computed Properties and Watchers
# VueJS – Watch Property

Tagged ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments