VueJS
Sử dụng watcher trong vuejs
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>
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
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Comments
