vue2watch监听对象中的值

在 Vue.js 中，可以使用 `watch` 选项来监听对象中的值的变化。具体来说，你可以使用 `$watch` 方法来监听对象中特定属性的变化，也可以使用深度观察来监听整个对象的变化。

下面是一个简单的例子：

<template>
  <div>
    <p>对象的值: {{ obj }}</p>
    <button @click="updateObj">更新对象</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'John',
        age: 25
      }
    }
  },
  methods: {
    updateObj() {
      this.obj.name = 'Jane'
      this.obj.age = 30
    }
  },
  watch: {
    obj: {
      handler(val) {
        console.log('对象被更新了', val)
      },
      deep: true
    }
  }
}
</script>

在这个例子中，我们定义了一个对象 `obj`，并在模板中渲染了它的值。我们还定义了一个 `updateObj` 方法，当按钮被点击时，它会更新对象的值。最后，我们使用 `watch` 选项来监听整个对象的变化，并在控制台中输出相应的消息。

需要注意的是，我们在 `watch` 选项中设置了 `deep: true`，这意味着我们将对整个对象进行深度观察，而不仅仅是对象的属性。这样可以确保我们能够捕获到对象任何部分的变化。