vue中的对象、数组和对象数组

在Vue中，对象、数组和对象数组的响应式处理方式相同。Vue 2.x 使用了 Object.defineProperty 来实现数据的响应式，而在 Vue 3.0 中，则使用了 Proxy 重写了内部的响应式系统。

以下是在Vue中处理对象、数组和对象数组的基本示例：

对象：

new Vue({
  data() {
    return {
      myObject: {
        key1: 'value1',
        key2: 'value2'
      }
    };
  },
  methods: {
    updateObject() {
      this.myObject.key1 = 'newValue';
    }
  }
});

数组：

new Vue({
  data() {
    return {
      myArray: ['item1', 'item2', 'item3']
    };
  },
  methods: {
    updateArray() {
      // 添加元素
      this.myArray.push('item4');
      
      // 或者通过索引更新元素
      this.myArray[1] = 'newItem2';
    }
  }
});

对象数组：

new Vue({
  data() {
    return {
      myObjectArray: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
      ]
    };
  },
  methods: {
    updateObjectArray() {
      // 更新对象属性
      this.myObjectArray[0].name = 'John Doe';
      
      // 或者添加新对象到数组
      this.myObjectArray.push({ id: 3, name: 'Doe' });
    }
  }
});

在以上示例中，当对象的属性、数组的元素或对象数组的对象属性发生变化时，Vue会自动跟踪这些变化并更新相关的DOM部分。这就是Vue响应式系统的基本工作方式。