如何使用watch监听对象中的某个属性【转】

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可以方便地监听对象的属性变化，以及进行一些快速的计算和操作。

原文链接：[如何使用watch监听对象中的某个属性](https://www.enlanhao.com/code/289147.html)