Vue2中$set更新对象和更新数组的不同用法

众所周知，vue2中不能直接修改对象或数组的值，时常会出现数据更新但页面dom不更新的情况，这个时候就要使用$set来修改对象或数组的值。

$set更新对象

入参

1.对象；2.属性名；3.属性值。

实现

// 修改对象中原有的属性
this.$set(this.obj, 原属性名, 新属性值)

// 向对象中添加新属性
this.$set(this.obj, 新属性名, 新属性值)

$set更新数组

入参

1.数组；2.index；3.你要修改的值。

实现

// 修改数组中某条数据的原有属性
this.$set(this.array, index, {...this.array[index],原属性名:新属性值})

// 向数组中某条数据的添加新属性
this.$set(this.array, index, {...this.array[index],新属性名:新属性值})

// 修改数组中整条数据
this.$set(this.array, index, 新数据)

// 替换整个数组
this.$set(this, 'array', 新数组)

注意：$set方法只能在Vue组件的methods中使用，不能在computed属性或者watch中使用。