vue为什么要用set

Vue使用set方法是为了解决在更新对象属性时，Vue无法检测到的问题。

在Vue中，当我们使用双向绑定来更新对象属性时，Vue内部会使用Object.defineProperty()方法为对象添加getter和setter，以便在对象属性发生变化时能够通知Vue更新视图。然而，Vue无法监测到通过索引或直接修改数组指定位置的值，或者通过直接给对象添加新属性的方式来修改对象属性。

这时就需要使用Vue提供的set方法来解决这个问题。set方法可以向Vue实例中的响应式对象添加一个全新的响应式属性，并确保这个属性也是响应式的。使用set方法后，Vue就能够监听到这个新的属性的变化，从而进行相应的更新。

另外，set方法还可以用于vuex状态管理中，当我们需要在store中添加新的属性时，可以使用set方法来动态添加一个新的响应式属性。这样，即使新的属性在初始状态时不存在，Vue仍然能够检测到这个属性的变化，并对相应的组件进行更新。

总之，使用Vue的set方法可以解决Vue无法监测到新增属性或直接修改数组指定位置的值的问题，保证对象属性的变化能够被Vue正确地响应和更新视图。所以，在使用Vue时，当需要新增属性或直接修改数组指定位置的值时，应该优先使用set方法来实现。

Vue中的set方法是用来更新响应式数据的，它可以用于添加新属性，以及修改已存在的属性。Vue为什么要用set方法呢？以下是几个原因：

1. 实现响应式
   在Vue中，数据的响应式更新是通过侦测属性的访问并根据情况触发更新的。Vue的响应式系统会在创建实例时递归地将对象中的所有属性转化为getter/setter，并且在属性被访问和修改时触发相应的更新。然而，Vue不能检测以下情况的变动：通过索引修改数组中的元素，直接修改数组的长度，通过属性修改数组中的元素。为了解决这个问题，Vue提供了set方法来更新这些情况下的变动。

2. 动态添加属性
   有时候，我们需要在运行时动态地往对象中添加新的属性。如果直接通过赋值的方式来添加属性，新添加的属性将不会是响应式的，因此无法触发视图的更新。而使用set方法可以动态地给对象添加新的属性，并且确保该属性是响应式的。

3. 避免无效的响应式更新
   在某些情况下，如果我们使用直接赋值的方式来更新响应式数据，可能会触发无效的响应式更新。比如，如果我们直接修改一个数组的某个元素，可能会导致整个数组的重新渲染。而使用set方法可以避免这种情况，它只会更新被修改的属性，而不会触发无效的更新。

4. 更好的性能
   使用set方法可以帮助Vue在更新响应式数据时进行优化，减少不必要的更新操作。Vue的响应式系统内部会使用一些高效的算法来追踪数据的变化，并且在更新时只触发必要的更新，以提高性能。因此，使用set方法可以帮助Vue在更新响应式数据时做更好的性能优化。

5. 统一的修改方式
   使用set方法可以使代码更具可读性和一致性。通过set方法来修改数据，可以使代码更加清晰明了，同时也能统一修改数据的方式，提高代码的可维护性。

总之，Vue使用set方法可以帮助实现响应式数据的更新，动态添加属性，避免无效的响应式更新，提高性能，并且使代码更具可读性和一致性。

Vue中使用set()方法的目的是为了触发对象属性的变化检测。Vue通过代理对象来进行数据劫持，当对象的属性被访问或修改时，Vue可以自动捕捉到这些变化并进行相应的更新操作。然而，对于新增的属性或者数组的索引进行修改时，Vue无法自动捕捉到变化。

这时候就需要使用set()方法来手动触发属性的变化检测。set()方法是Vue提供的一个全局方法，用于实现响应式属性的添加和删除。通过使用set()方法，Vue可以监听到新属性的添加，从而使得新增的属性也能够被监测到。

下面将从方法和操作流程两个方面来讲解为什么要用set()方法。

方法

Vue.set()

Vue提供了一个全局方法Vue.set()，用于向对象添加响应式属性。它的语法如下：

Vue.set(object, propertyName, value)

• object：要进行属性添加的对象；
• propertyName：要添加的属性名；
• value：要添加的属性值。

this.$set()

在Vue组件中，可以通过实例属性$set()来调用Vue.set()方法。它的语法如下：

this.$set(object, propertyName, value)

• object：要进行属性添加的对象；
• propertyName：要添加的属性名；
• value：要添加的属性值。

示例

下面是一个示例，演示如何使用set()方法向对象添加响应式属性：

// 在Vue组件中
data() {
  return {
    person: {
      name: 'Alice',
      age: 25
    }
  }
},

mounted() {
  this.$set(this.person, 'gender', 'female')
}

在mounted生命周期钩子中，调用this.$set()方法向person对象添加了一个新的属性gender，值为'female'。由于使用了$set()方法，Vue会监听到新属性的添加，并将其变为响应式的，从而可以进行相应的数据绑定和更新。

操作流程

1. 创建一个Vue实例或组件，并定义一个响应式的对象，如下：

data() {
  return {
    person: {
      name: 'Alice',
      age: 25
    }
  }
}

2. 使用set()方法进行属性添加，如下：

this.$set(this.person, 'gender', 'female')

3. 触发属性的变化检测，从而使得新增的属性也能够被监测到。

通过以上操作流程，就可以使用set()方法向对象添加响应式属性，并确保新增的属性也可以被Vue监听到。

总结：Vue使用set()方法的目的是为了触发对象属性的变化检测，从而使得新增的属性也能够被监测到。通过set()方法，可以向对象添加响应式属性，并实现数据的绑定和更新。