一、什么是watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：
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
27
28
29
30
31
32
33
34
35
36
37
| <body>
<div id="app">
<input type="text" v-model="username">
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
username: ""
},
watch: {
username(newVal, oldVal) {
console.log(`监听到数据变化：${oldVal} -> ${newVal}`);
}
}
});
</script>
|
二、使用watch检测用户名是否可用
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <body>
<div id="app">
<input type="text" v-model="username">
</div>
</body>
<script src="./vue.js"></script>
<script src="./axios.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
username: ""
},
watch: {
async username(newVal) {
if (newVal === '') return;
const { data: res } = await
axios.get('https://www.escook.cn/api/finduser/' + newVal);
console.log(res);
}
}
});
</script>
## 三、immediate选项
刚进入页面的时候，默认的侦听器是不会触发，如果一定要触发，就必须添加immediate选项，用法如下：
watch: {
username: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
immediate: true
}
}
|
四、deep选项
如果侦听的是一个对象，对象内部的属性发生变化，侦听器默认是不会被触发的。为了解决这个问题，就有了deep选项。
deep的用法如下：
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <body>
<div id="app">
<input type="text" v-model="info.username">
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
info: {
username: ""
}
},
watch: {
info: {
handler(newVal) {
console.log(newVal.username);
},
deep: true
}
}
});
</script>
|
五、侦听单个属性
如果直接侦听对象info中的username属性，可以这么写：
1
2
3
4
5
| 'info.username'(newVal) {
console.log(newVal);
}
|