Vue响应式添加、修改数组和对象的值

Vue响应式添加、修改数组和对象的值，主要有两种方式：直接赋值、调用特定的方法。

一、直接赋值

当通过直接赋值的方式向数组或对象添加/修改元素时，Vue会监听并更新视图。例如：

1、向对象中添加新属性

export default {
  data() {
    return {
      userInfo: {
        name: 'Alice',
        age: 18
      }
    }
  },
  methods: {
    addProperty() {
      this.userInfo.phone = '13688888888';
    }
  }
}

在这个示例中，我们通过在userInfo对象中直接添加一个新属性phone来实现添加新属性的功能。同时，这种方式也可以用于修改现有属性的值。

2、向数组中添加/修改元素

export default {
  data() {
    return {
      userList: ['Alice', 'Bob', 'Cathy']
    }
  },
  methods: {
    addElement() {
      this.userList.push('David');
    },
    modifyElement() {
      this.userList[0] = 'Alex';
    }
  }
}

在这个示例中，我们使用了Array的方法push()和直接赋值方式，来添加和修改数组中的元素。Vue会监听这些操作并自动更新视图。

二、调用特定的方法

Vue也提供了一系列的方法，可以专门用于添加、删除、修改数组或对象中的元素。例如：

1、通过Vue.set()方法向对象中添加新属性

export default {
  data() {
    return {
      userInfo: {
        name: 'Alice',
        age: 18
      }
    }
  },
  methods: {
    addProperty() {
      this.$set(this.userInfo, 'phone', '13688888888');
    }
  }
}

在这个示例中，我们使用了Vue提供的$set()方法，来向userInfo对象中添加新属性phone。这个方法会自动确保这个新属性被加入到Vue实例中并触发更新视图。

2、通过Vue.set()方法向数组中添加元素

export default {
  data() {
    return {
      userList: ['Alice', 'Bob', 'Cathy']
    }
  },
  methods: {
    addElement() {
      this.$set(this.userList, 3, 'David');
    }
  }
}

在这个示例中，我们使用Vue提供的$set()方法，向userList数组中添加一个新元素David。需要注意的是，我们并不是像之前一样，使用push()方法向数组尾部添加一个元素，而是用$set()方法手动指定元素的下标。这一点特别需要注意。

综上所述，我们可以通过直接赋值或调用Vue提供的方法，来实现Vue响应式添加、修改数组和对象的值，从而实时更新视图。