淘先锋技术网

首页 1 2 3 4 5 6 7

在Vue中,watch是监控数据变化的重要方法之一。通过watch,我们能够在数据变化时及时响应并执行一些操作,实现数据的双向绑定。

watch: {
// 监控person里的name属性
'person.name': function(val, oldVal) {
console.log('name changed from', oldVal, 'to', val);
},
// 监控person里的age属性
'person.age': function(val, oldVal) {
console.log('age changed from', oldVal, 'to', val);
}
}

从上面的代码中我们可以看到,watch里以对象的形式定义要监控的属性名,以及属性值变化时要执行的回调函数。主要分为两个参数,一个是新值val,一个是旧值oldVal。当监控的属性值发生变化时,在控制台输出相关信息。

但是有时候我们需要监控的属性是一个对象或者数组,watch可以监控到对象或数组的变化,例如下面这个例子:

watch: {
// 监控obj里面的属性
obj: {
handler: function(val, oldVal) {
console.log('obj changed from', oldVal, 'to', val);
},
// 深度监控
deep: true
},
// 监控arr里面的属性
'arr': function(val, oldVal) {
console.log('arr changed from', oldVal, 'to', val);
}
}

上面的代码中,我们可以看到watch可以监控对象(obj)里面的属性变化,如果这个属性是一个对象或者数组,我们可以通过设置deep为true来进行深度监控。这样一来,如果对象中的某个属性变化了,watch也能够监控到。

除了上面讲到的普通对象和数组,watch还支持监控计算属性(computed)。计算属性是依赖于其他属性计算出来的属性,如果计算属性的依赖属性发生了变化,那么计算属性也会发生变化。下面是一个计算属性的例子:

watch: {
// 监控fullName计算属性
'fullName': function(val, oldVal) {
console.log('fullName changed from', oldVal, 'to', val);
}
},
computed: {
// 计算属性,根据firstName和lastName计算fullName
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}

当firstName或者lastName发生变化时,计算属性fullName也会相应地发生变化,并且watch也能够监控到这个变化。

最后,还需要注意的是,watch可以重复定义多个属性来监控,而且可以根据实际情况选择普通的watch或者在computed属性里进行监控。