vue2中何时需要使用$set,你知道吗？

在Vue.js 2中，当需要动态添加或修改对象或数组的属性时，可以使用$set方法来确保响应式更新。

由于Vue.js无法检测到对象或数组新增的属性，如果直接通过赋值的方式添加新属性，Vue.js将无法触发更新。这是因为Vue.js在实例化时会对数据进行响应式处理，只有已经存在的属性才会被监听。

以下是一些使用$set的情况：

1. 动态添加对象的属性：

   this.$set(this.obj, 'newProperty', 'value');
   
   
   
   
   
   // Vue实例数据
   data() {
     return {
       obj: {
         name: 'John',
         age: 25
       }
     };
   },
   methods: {
     addProperty() {
       this.$set(this.obj, 'newProperty', 'value');
     }
   }
   
   
   //在上述代码中，addProperty方法使用$set方法向obj对象中动态添加了一个名为newProperty的属性。
   

2. 动态修改对象的属性：

   this.$set(this.obj, 'existingProperty', 'newValue');
   
   
   
   // Vue实例数据
   data() {
     return {
       obj: {
         name: 'John',
         age: 25
       }
     };
   },
   methods: {
     updateProperty() {
       this.$set(this.obj, 'name', 'Jane');
     }
   }
   
   // 在上述代码中，updateProperty方法使用$set方法动态修改了obj对象中名为name的属性值。

     3.动态添加数组的元素：

this.$set(this.arr, index, 'newElement');



// Vue实例数据
data() {
  return {
    arr: ['apple', 'banana', 'orange']
  };
},
methods: {
  addElement() {
    this.$set(this.arr, this.arr.length, 'grape');
  }
}

// 在上述代码中，addElement方法使用$set方法向arr数组末尾添加了一个名为grape的元素。

其中，this.obj和this.arr分别是Vue实例中的对象和数组，index表示数组中要添加元素的位置。 注意：如果想要动态删除对象的属性，可以使用Vue.delete方法。

Vue.delete(this.obj, 'propertyName');

总之，当需要在Vue.js中对对象或数组进行动态操作时，如果希望触发响应式更新，就需要使用$set方法。