前端Vue篇之vue如何监听对象或者数组某个属性的变化

在Vue中，可以使用watch属性来监听组件的data中的对象或数组的变化。如果你想监听一个对象的特定属性或者数组的某些变化，你可以使用字符串形式的key路径或者函数式的深度监听。

以下是一些示例代码：

<template>
  <div>{{ myObject.someProperty }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      myObject: {
        someProperty: 'initial value'
      }
    };
  },
  watch: {
    // 监听myObject的someProperty属性
    'myObject.someProperty': function(newValue, oldValue) {
      console.log(`someProperty changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    changeProperty() {
      this.myObject.someProperty = 'new value';
    }
  }
};
</script>

如果你想监听数组的某个索引或者长度变化，你也可以使用类似的方式：

<template>
  <div>{{ myArray[0] }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      myArray: ['initial value']
    };
  },
  watch: {
    // 监听数组的第一个元素
    'myArray': function(newValue, oldValue) {
      console.log(`Array changed from ${oldValue} to ${newValue}`);
    },
    // 监听数组的第一个元素
    'myArray.0': function(newValue, oldValue) {
      console.log(`Array's first element changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    changeArray() {
      this.myArray[0] = 'new value';
    }
  }
};
</script>

如果你需要深度监听一个对象，可以使用deep: true选项：

watch: {
  myObject: {
    handler: function(newValue, oldValue) {
      console.log('myObject changed');
    },
    deep: true
  }
}

请注意，Vue 3.x 中引入了Proxy来替代之前的Object.defineProperty，这意味着现在无论是普通的对象属性还是数组的索引变化，默认都会被监听到