在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属性里进行监控。