vue this.$set的作用

this.$set方法是Vue框架中用于向响应式对象添加新属性并确保其是响应式的，从而触发视图更新的方法。当我们给对象添加一个新属性时，如果直接使用常规的赋值方式（例如this.myObject.newProperty = 'hi'），Vue无法检测到这个新增属性，导致不会触发视图的更新。而使用this.$set方法，可以将新增的属性转变为响应式属性，使其能够被Vue检测到，并通知视图进行更新。

相关问题

Vue.set this.$set

Vue.set() 或者 this.$set() 是 Vue 提供的一种方法，用于在响应式对象上添加一个响应式属性。通常情况下，我们可以直接给一个对象添加属性，但是这样添加的属性是不会具备响应式的特性，即当这个属性的值发生改变时，对应的视图不会自动更新。而使用 Vue.set() 或者 this.$set() 添加的属性，则具有响应式特性。

Vue.set() 的语法如下：

其中，object 表示要添加属性的对象，propertyName/index 表示属性名或者索引值，value 表示属性值。

this.$set() 与 Vue.set() 的用法相同，只不过是在组件中使用的方法。

举个例子，假设我们有一个 data 对象：

data: {
message: 'Hello World',
list: []
}

如果我们想要给 list 数组添加一个响应式属性，可以使用如下代码：

this.$set(this.list, 0, 'item');

这样，在 list 数组中添加了一个值为 'item' 的元素，并且该元素具有响应式特性。

Vue this.$set

在Vue中，`this.$set`是一个实例方法，用于在响应式对象上设置新的属性或修改已有的属性，并确保这些属性也是响应式的。

通常情况下，当你在Vue实例或组件的`data`选项中声明一个属性时，Vue会将其转化为响应式属性，这意味着当属性的值发生变化时，相关的视图会自动更新。然而，对于已经创建的对象，Vue无法追踪属性的添加或修改。这时，就需要使用`this.$set`方法来达到响应式更新的效果。

使用方法如下：

this.$set(object, key, value)

- `object`：要添加或修改属性的对象。
- `key`：要添加或修改的属性名。
- `value`：要设置的属性值。

下面是一个示例：

var app = new Vue({
  data: {
    myObject: {}
  },
  mounted: function () {
    this.$set(this.myObject, 'name', 'John');
    this.$set(this.myObject, 'age', 25);
  }
});

在上面的示例中，我们在Vue实例中的`data`选项中定义了一个空对象`myObject`。然后，在组件的`mounted`生命周期钩子中使用`this.$set`方法向`myObject`对象添加了两个属性：`name`和`age`。由于使用了`this.$set`方法，这两个属性也会成为响应式属性。

需要注意的是，如果要修改数组的某个元素，也需要使用`this.$set`方法。Vue无法检测到通过索引修改数组元素的变化。例如：

var app = new Vue({
  data: {
    myArray: ['a', 'b', 'c']
  },
  methods: {
    updateArray: function (index, newValue) {
      this.$set(this.myArray, index, newValue);
    }
  }
});

在上面的示例中，我们定义了一个`updateArray`方法，用于修改`myArray`数组中指定索引的元素。通过使用`this.$set`方法，可以确保修改后的数组元素是响应式的。

希望这个解答对你有所帮助！如果你还有其他关于Vue的问题，请随时提问。