如何使用watch监听对象中的某个属性【转】
2023-09-17 本文已影响0人
zlchen
watch是Vue中的一个重要功能，可以用来监听对象中某个属性的变化。本文将从以下几个方面详细介绍watch的使用方法。
一、如何在watch中监听对象的属性
使用watch监听对象中的某个属性非常简单，只需要在Vue实例中定义一个watch属性，然后在属性中指定要监听的属性名即可。
watch: {
propName: function (newValue, oldValue) {
// do something
}
}
其中 propName 是要监听的属性名，newValue是新值，oldValue是旧值。
二、如何使用deep选项监听对象中深层次的属性变化
当对象中的属性是一个嵌套的对象或数组时，我们需要使用deep选项来监听其深层次的属性变化。
watch: {
'propName.deepPropName': {
handler: function (newValue, oldValue) {
// do something
},
deep: true
}
}
其中 propName 是嵌套对象的属性名，deepPropName 是要监听的深层次属性名。
三、如何在watch中使用immediate选项来立即执行watch的回调函数
如果我们想让watch的回调函数在创建实例时就执行一次，我们可以使用immediate选项。
watch: {
propName: {
handler: function (newValue, oldValue) {
// do something
},
immediate: true
}
}
注意：立即执行的回调函数不会接收到旧的值，因为此时旧的值并不存在。
四、如何组合使用watch和computed监听对象中的属性
有些情况下，我们需要监听一个变化的值，并且根据这个值计算得到另外一个值。这时可以使用watch和computed两个属性组合使用。
data: {
propA: 1,
propB: 2
},
watch: {
propA: {
handler: function (val) {
this.propB = val * 2;
}
}
},
computed: {
propC: function () {
return this.propB + 1;
}
}
这段代码中，我们监听了propA属性的变化，当propA发生变化时，我们将propB重新计算为propA的两倍。同时，我们使用computed属性计算出了propC，propC的值取决于propB的值。
五、如何使用watch监听数组中的元素变化
如果要监听数组中某个元素的变化，我们需要使用Vue提供的$watch方法。
data: {
arr: [1, 2, 3]
},
created: function () {
this.$watch('arr[1]', function (newValue, oldValue) {
// do something
});
}
这段代码中，我们监听了数组arr中的第二个元素的变化。
以上就是watch的使用方法。使用watch可以方便地监听对象的属性变化，以及进行一些快速的计算和操作。
