欢迎光临
个人技术文档整理

Vue:$set

//先检测 是否已经存在这个属性
      if (this.model.hasOwnPropperty("isEdit")) {
        this.model.isEdit = true;
      } else {
        this.$set(model, "isEdit", true); //增加一个属性,并设置为true
      }

什么是 $set 方法?

$set 方法是 Vue 提供的一个实例方法,用于向已有的 Vue 实例中添加一个新的响应式属性,并触发视图的更新。$set 方法的用法如下所示:

Vue.set(obj, key, value)

其中,obj 是要添加属性的对象,key 是要添加的属性名,value 是要添加的属性值。$set 方法会在 obj 对象中添加一个新的响应式属性 key,并将其值设置为 value,然后通知 Vue 进行视图更新。

除了使用 Vue.set 方法,还可以使用实例对象的 $set 方法来实现相同的效果:

this.$set(this.obj, 'key', value)

什么情况下需要使用 $set 方法?

在 Vue 中,数据通常是响应式的,当数据发生变化时,Vue 会自动更新视图。但是,有一些情况下,Vue 无法检测到数据的变化,导致视图没有及时更新,例如:

  • 当添加一个新的属性时,Vue 无法检测到该属性的变化;
  • 当直接修改数组的某一项时,Vue 无法检测到该项的变化。

这时,就需要使用 $set 方法来通知 Vue 数据的变化,从而使视图得到更新。

下面举一个例子来说明,假设有一个 data 对象:

data: {
  obj: {
    name: 'Tom',
    age: 18
  },
  arr: ['apple', 'banana', 'orange']
}

当我们修改 obj 对象中的属性时,例如:

this.obj.name = 'Jerry'

Vue 会自动检测到数据的变化,并更新视图。但是,当我们添加一个新的属性时,例如:

this.obj.gender = 'male'

Vue 无法检测到该属性的变化,导致视图没有及时更新。这时,就需要使用 $set 方法来通知 Vue 数据的变化,例如:

this.$set(this.obj, 'gender', 'male')

同样的,当我们直接修改数组的某一项时,例如:

this.arr[0] = 'pear'

Vue 无法检测到该项的变化,导致视图没有及时更新。这时,也需要使用 $set 方法来通知 Vue 数据的变化,例如:

this.$set(this.arr, 0, 'pear')

$set 方法的注意事项

使用 $set 方法时,需要注意以下几点:

  • 只能用于已存在的对象和数组,不能用于新建的对象和数组;
  • 不能用于根级别的数据;
  • 不能用于 Vue 实例的属性或方法。

总结

$set 方法是 Vue 提供的一个实例方法,用于向已有的 Vue 实例中添加一个新的响应式属性,并触发视图的更新。$set 方法可以解决在某些情况下,Vue 无法检测到数据的变化,导致视图没有及时更新的问题。在使用 $set 方法时,需要注意其适用的对象和数组,以及不能用于根级别的数据和 Vue 实例的属性或方法。

赞(1)