vue什么时候用set

在Vue中，set方法用于修改一个响应式对象的属性值，并通知相关的视图更新。我们通常在以下情况下使用set方法：

1. 当键名是响应式对象的属性时：当我们修改一个对象的属性时，Vue会自动更新相关的视图。然而，如果我们直接使用赋值操作符修改一个对象的属性，Vue的侦听系统将无法检测到这个变化。在这种情况下，我们需要使用set方法来更新属性，并确保响应式系统能够正确地追踪到属性的变化。

例如，假设我们有一个响应式对象user，其中包含name和age属性。我们可以通过以下方式使用set方法更新name属性的值：

Vue.set(user, 'name', 'John');

2. 当修改数组的某个元素时：当我们修改数组中的某个元素时，Vue无法自动更新相关的视图。同样，我们需要使用set方法来更新数组，并确保Vue能够正确地追踪到数组的变化。

例如，假设我们有一个响应式数组list，其中包含多个元素。我们可以通过以下方式使用set方法更新数组的第一个元素：

Vue.set(list, 0, 'apple');

需要注意的是，当我们使用set方法修改数组的某个元素时，Vue还会自动调用数组的splice方法来插入或删除元素。

总结来说，set方法在Vue中的用途是修改响应式对象的属性值，并确保相关的视图能够正确地更新。我们通常在操作响应式对象的属性或修改数组元素时使用set方法。

Vue中使用set的场景有以下几种：

1. 在响应式数据中添加新的属性
   当使用Vue的data选项或$set方法将一个对象添加到响应式数据中时，Vue将无法检测到新属性的变化。此时，可以使用set方法手动触发属性的响应式更新。

   Vue.set(vm.someObject, 'newProperty', 123);
   // 或者
   this.$set(this.someObject, 'newProperty', 123);
   

2. 在数组中添加新的元素
   使用push或者splice方法向数组中添加新的元素时，Vue能够检测到数组的变化并进行更新。但是，使用索引直接设置数组元素时，Vue无法进行响应式更新。

   // 添加一个新元素到数组
   vm.items.push('new item');
   

3. 当使用对象索引方式设置值时
   当使用对象的索引方式设置值时，Vue无法检测到该值的变化。此时，可以使用set方法手动触发属性的响应式更新。

   Vue.set(vm.someObject, 'newProperty', 123);
   // 或者
   this.$set(this.someObject, 'newProperty', 123);
   

4. 在v-for中迭代渲染出来的每个项目
   在v-for指令中，若需要迭代渲染出来的每个项目都建立响应式关系，可以使用v-bind:key和set方法。

   <div v-for="item in items" :key="item.id">
     {{ item }}
   </div>
   

5. 在自定义指令中修改绑定值
   当需要在自定义指令中修改绑定的值时，需要使用set方法来触发响应式更新。

   Vue.directive('my-directive', {
     bind: function(el, binding, vnode) {
       Vue.set(binding.value, 'newProperty', 123);
     }
   });
   

以上是Vue中使用set的一些常见场景。在这些场景中，使用set方法能够帮助我们手动触发响应式更新，确保视图能正确地渲染出最新的数据。

在Vue中，通常使用set方法来更新Vue实例的数据并保持响应性。

Vue的响应性系统是通过JavaScript的Object.defineProperty方法来实现的。这意味着如果直接修改了一个Vue实例的数据，Vue无法追踪到这个修改，从而无法进行重新渲染。为了解决这个问题，Vue提供了set方法来更新数据。

set方法的使用时机主要有以下几种情况：

1. 在Vue实例创建之前，如果需要修改初始数据，可以使用set方法。例如，在created钩子函数中使用set方法对初始数据进行修改。

created() {
  this.$set(this.data, 'name', 'new name');
}

2. 当需要在一个数组中添加或删除元素时，使用set方法能够触发Vue的响应式更新。这是由于set方法会正确地处理数组的变异方法，例如push、pop、shift、unshift、splice、sort和reverse。

this.$set(this.items, index, newItem);  // 添加新元素
this.$set(this.items, index, undefined);  // 删除元素，但保留原数组长度

3. 当需要在一个对象中添加或删除属性时，也可以使用set方法。这样做可以保证对象属性的响应性，从而触发重新渲染。

this.$set(this.obj, 'propertyName', value);  // 添加属性
this.$set(this.obj, 'propertyName', undefined);  // 删除属性

需要注意的是，对于已经声明的响应式对象，在Vue实例创建之后，直接修改对象的属性是会触发响应式更新的，无需使用set方法。

总结起来，set方法的使用时机是在以下情况下：

1. 在Vue实例创建之前修改初始数据时；
2. 在数组中添加或删除元素时；
3. 在对象中添加或删除属性时。

通过合理使用set方法，可以确保我们能够正确地更新Vue实例的数据并保持响应性。