什么时候使用vue.$set

使用vue.$set的时机主要是在Vue实例中动态添加响应式属性或修改响应式属性的值时。

在Vue中，当我们使用data选项来声明数据对象时，Vue会将这些属性转为响应式的，在属性的值发生改变时，视图会自动更新。但是，对于新增的属性或直接修改数组索引的方式，Vue无法检测到变化，导致视图不会更新。

这个时候就需要使用vue.$set方法来手动添加响应式属性或修改响应式属性的值。vue.$set方法接受三个参数：Object对象、属性名称和属性值。它会在对象上添加该属性，并将其设置为响应式的。如果属性名称已经存在，则会更新属性的值。

下面举个例子来说明何时使用vue.$set：

// 在Vue实例中，声明一个data对象
data: {
  myObj: {
    name: 'John',
    age: 25
  },
  myList: [1, 2, 3]
},

methods: {
  updateData() {
    // 添加一个新属性，因为Vue无法检测到该变化，所以视图不会更新
    // 使用vue.$set方法添加响应式属性
    this.$set(this.myObj, 'gender', 'male');

    // 修改数组索引的值，也需要使用vue.$set方法才能触发视图更新
    // 修改数组索引为1的值
    this.$set(this.myList, 1, 10);
  }
}

在上面的例子中，当调用updateData方法时，通过this.$set方法在myObj对象中添加了一个新的属性gender，并且修改了myList数组索引为1的值。这样才能保证数据的变化能够触发视图的更新。

总之，使用vue.$set的时机是在Vue实例中动态添加响应式属性或修改响应式属性的值时，以确保视图能够正确更新。

Vue的$set方法通常在以下情况下使用：

1. 动态添加属性：当你在Vue实例或组件中需要动态地添加一个新的属性到响应式的数据对象上时，就可以使用$set。因为在Vue中，只有在创建实例时已经存在的属性才是响应式的，如果直接通过赋值的方式添加新属性，Vue并不会将其转为响应式的。这时，就可以使用$set来将属性转为响应式。例如：

Vue.set(obj, 'newProp', 123);

2. 在数组中添加元素：当需要向一个已经被Vue转化为响应式的数组中添加新元素时，直接使用数组的push方法不会触发Vue的更新。此时，可以使用$set方法来添加新元素，并保证Vue能够检测到该变化。例如：

Vue.set(arr, index, newValue);

3. 修改数组的某一项：在Vue中，直接通过索引修改数组的某一项值时，Vue也无法检测到该变化。此时，可以使用$set方法来修改数组的某一项，并触发Vue的更新。例如：

Vue.set(arr, index, newValue);

4. 动态修改对象属性的值：当你需要动态修改一个对象的属性时，可以使用$set来确保Vue能够检测到该变化。例如：

Vue.set(obj, 'propertyName', newValue);

5. 遍历对象的属性，并修改属性值：在遍历一个对象的属性并修改属性值时，如果直接给属性赋新值，Vue无法检测到该变化。此时，可以使用$set来修改属性的值，并确保Vue能够检测到该变化。例如：

for (let key in obj) {
  Vue.set(obj, key, newValue);
}

使用vue.$set的时机是当需要在Vue响应式系统之外更改对象属性时，即动态添加新属性到响应式对象上。

在Vue中，当一个对象被添加到Vue的响应式系统中时，Vue会使用Object.defineProperty方法将对象的属性转为getter和setter，这样当属性被修改时，能够触发视图的更新。但是，如果在对象被添加到Vue之后再添加新的属性，Vue无法探测到这个变化。

举个例子，假设有一个data对象data: { name: 'Alice' }，在模板中使用{{ name }}可以正确地显示name的值。如果后来通过data.age = 20添加一个新属性，那么模板中的{{ age }}将无法正常显示新添加的属性。

Vue提供了特殊的方法vue.$set来解决这个问题。$set方法接收三个参数：对象，要设置的属性名，要设置的属性值。使用$set方法就能够正确地使对象的新属性成为响应式的。

下面介绍具体的操作流程。

1. 引入Vue和创建Vue实例
   首先，在JS文件中引入Vue，并创建一个Vue实例。

import Vue from 'vue';

new Vue({
  // ...
});

2. 创建响应式的数据对象
   在Vue实例的data选项中，创建一个响应式的数据对象。

data() {
  return {
    obj: { name: 'Alice' }
  };
}

3. 在需要的地方添加新属性
   在需要添加新属性的地方，使用vue.$set方法将新属性添加到响应式对象上。比如，在methods中的一个触发事件的方法中使用$set方法。

methods: {
  addNewProperty() {
    this.$set(this.obj, 'age', 20);
  }
}

4. 检查视图更新
   在模板中使用新添加的属性。Vue会监听到新属性的变化，并自动更新视图。

<div>{{ obj.name }}</div>
<div>{{ obj.age }}</div>

总结：
使用vue.$set的时机是当需要在Vue响应式系统之外更改对象属性时，即动态添加新属性到响应式对象上。使用$set方法的操作流程是先创建一个响应式的数据对象，在需要的地方使用$set方法添加新属性，并在模板中使用新添加的属性。这样就能够正确地使对象的新属性成为响应式的，从而保证视图的更新。