vue.set的用法

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

• 参数一:需要更新的数组或对象
• 参数二:是数组的下标或者对象的属性名，
• 参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']