vue中 watch 监听 对象里面的值发生变化

在 Vue 中，如果您希望监听对象内部某个值的变化，可以使用 watch 选项，结合 deep 选项以进行深度监听。以下是示例代码。

示例代码
<template>
  <div>
    <input v-model="myObject.name" placeholder="输入名字"/>
    <input v-model="myObject.age" placeholder="输入年龄"/>
    <p>姓名: {{ myObject.name }}</p>
    <p>年龄: {{ myObject.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    myObject: {
      handler(newValue, oldValue) {
        console.log('myObject 发生变化:', oldValue, '->', newValue);
      },
      deep: true // 深度监听
    }
  }
};
</script>
说明
data: 定义一个包含多个属性的响应式对象 myObject。

watch: 监听 myObject 的变化。

handler: 当 myObject 的任何属性发生变化时，触发此方法。

deep: 设置为 true，允许监听对象内部的属性变化。

监听特定属性
如果只想监听对象的特定属性，可以直接指定属性路径：

watch: {
  'myObject.name'(newValue, oldValue) {
    console.log('姓名发生变化:', oldValue, '->', newValue);
  },
  'myObject.age'(newValue, oldValue) {
    console.log('年龄发生变化:', oldValue, '->', newValue);
  }
}
小结
使用 deep 选项可以方便地监听对象内部的属性变化，适用于需要监控复杂数据结构的场景。