Sử Dụng Watcher Trong Vuejs | Lê Vũ Nguyên Dạy Học Lập Trình

Có thể bạn quan tâm

VueJS

Giới thiệu về vuejs
Trạng thái
Phương thức
Vòng đời component
Tính toán
Watchers
Component
Props

Sử dụng watcher trong vuejs nguyen.le , 15 min read Nội dung bài viết

Giới thiệu nội dung bài viết
1. Ðịnh nghĩa và sử dụng

Giới thiệu nội dung bài viết

Watch giúp chúng ta định nghĩa các phương thức lắng nghe sự thay đổi của một biến, prop, computed trong chương trình. Trong watch chúng ta có thể chèn đoạn code nhiệm vụ thực thi khi biến số thay đổi với đầu vào là 2 tham số, newvalue và oldvalue từ params của từng phương thức lắng nghe này

1. Ðịnh nghĩa và sử dụng

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div id="app"> <div></div> <button @click="changeName">Change name</button></div><script> var app = new Vue({ el: "#app", data() { return { fullName: "Duc Hoang", }; }, watch: { fullName(newValue, oldValue) { console.log("newValue", newValue); console.log("oldValue", oldValue); }, }, methods: { changeName() { this.fullName = "Van Anh"; }, }, }); </script>

reactjs

Khi nhấn vào button khi ta sẽ thấy kết quả như trên

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<div id="app"> <div></div> <button @click="changeName">Change name</button></div><script> var app = new Vue({ el: "#app", data() { return { fullName: "Duc Hoang", }; }, watch: { fullName: "printLogs", }, methods: { changeName() { this.fullName = "Van Anh"; }, printLogs(newValue, oldValue) { console.log("newValue", newValue); console.log("oldValue", oldValue); }, }, }); </script>

Ðoạn mã này cũng có chung kết quả như trên, ta thấy thay vì ta định nghĩa là một phương thức và xử lí ngay tại đó, thì bây giờ ta tạo một method rồi từ định nghĩa fullName ở watch ta gán cho phương thức “printLogs” như vậy sẽ gọn gàng hơn, nếu bạn muốn mọi thứ chỉnh chu gom các phương thức định nghĩa ở methods