关于Vue.set()

简介

Vue.set() 是 Vue 中的一个全局方法，其主要作用是向响应式对象添加新的属性，并确保新属性同样具有响应式。在 Vue.js 中，当数据对象的属性被直接修改时，Vue 可以监测到数据变化并响应变化。但若添加新的响应式对象属性时，直接赋值的方法无法触发相应的响应变化。当需要向已创建的响应式对象中添加新属性时，就需要使用 Vue.set() 方法。
Vue.set() 的语法如下：

Vue.set( target, key, value )

• target：表示修改的目标响应式对象。
• key：需要添加的新属性名。
• value：新属性名对应的属性值。

示例

data() {
  return {
    list: [
      {
        name: '张三',
        age: 18
      },
      {
        name: '李四',
        age: 24
      }
    ],
    text: '未修改的字符串值'
  }
}

// 修改列表中张三的所有数据
this.$set(this.list, 1, {
  name: '张三',
  age: 19
})

// 修改列表中李四的年龄为18岁
this.$set(this.list[1], 'age', 18)

// 修改某个字符串属性
this.$set(this, 'text', '修改后的字符串值')