vue深度监听

2021-09-16

前端

放纵自己的欲望是最大的祸害;谈论别人的隐私是最大的罪恶;不知自己的过失是最大的病痛——亚里士多德

我们有时使用vuewatch,可能要对一个对象的多个属性进行监听

这样我们就可以使用深度监听

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
<template>
<view>
</view>
</template>

<script>
// 11位手机号码正则
const REGEXP_TEL = /^((1[3,5,8,7,9,6][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
export default {
data() {
return {
// 表单数据存储
formData: {
username: '',
password: ''
}
};
},
watch: {
formData: {
handler: 'cutValue',
deep: true
}
},
methods: {
// 监听formData
cutValue() {
console.log(this.formData);
}
}
};
</script>

<style scoped>
</style>

当我们的formData.username或者formData.password发生变化时,就会调用cutValue函数,打印我们的formData