vue为什么非要用set

Vue中使用set的目的是为了确保响应式数据的更新能够被Vue所追踪和触发重新渲染。当我们直接给Vue实例或组件赋值一个新的属性时，Vue无法追踪到这个属性的变化，因此不会触发重新渲染。

而使用set方法可以将新属性转换为响应式属性，从而让Vue能够追踪到它的变化并触发重新渲染。具体原因有以下几点：

1. 响应式系统：Vue的响应式系统是基于Object.defineProperty实现的。这意味着Vue只能劫持已经存在的属性，对于新增的属性，Vue并没有办法自动追踪其变化。而set方法可以通过Vue提供的内部方法，将新增的属性转换为响应式属性，从而实现变化的追踪。

2. 递归代理：Vue中的数据对象通常是复杂的嵌套结构，包含了多层嵌套的对象和数组。使用set方法可以实现对整个数据结构的递归代理，让所有子属性都能被Vue所追踪并触发重新渲染。

3. 数组变化追踪：Vue对数组的变化追踪比较特殊。直接修改数组元素的值或修改数组长度，Vue是能够追踪到的。但是如果直接修改数组的某个索引位置上的属性，Vue就无法追踪到这个变化。而使用set方法可以将数组特定索引位置的属性转换为响应式属性，从而让Vue能够追踪到这个变化。

总结来说，Vue中使用set主要是为了实现对新增属性、嵌套属性和数组变化的追踪和重新渲染。如果我们不使用set方法，Vue将无法正确地追踪这些变化，导致视图无法自动更新。因此，在Vue中使用set是为了保证数据的响应式更新的重要方法之一。

Vue.js是一个流行的JavaScript框架，其核心思想是基于数据驱动的UI设计。在Vue中，使用set方法来对数据进行修改和更新是一种常见的选择。下面是几个使用set方法的原因：

1. 数据的响应式
   在Vue中，通过使用set方法来修改数据，可以实现数据的响应式。Vue会在数据变化时自动更新视图，而不是手动更新DOM。这样可以更方便地管理和控制数据的变化，提高开发效率和用户体验。

2. 提高性能
   set方法可以实现局部更新，而不是更新整个数据对象。在大型应用中，当只需要更新部分数据时，使用set方法可以避免不必要的全局重新渲染，提高性能。

3. 避免数据的丢失
   使用set方法可以避免意外地丢失数据。当直接对数据对象进行赋值时，如果数据对象不存在对应的属性，那么该属性将会被添加到数据对象中。但是，这种方式可能会导致数据丢失的风险。而使用set方法可以确保数据对象存在，并且只修改特定的属性，不会导致数据的丢失。

4. 跟踪数据的变化
   set方法可以帮助我们更好地跟踪数据的变化。通过使用set方法，我们可以在数据被修改时执行一些特定的操作，如记录日志、发送数据到服务器等。这样可以更好地了解数据的变化和使用情况。

5. 兼容性与易用性
   set方法是Vue框架内置的方法，在Vue的开发环境中使用set方法更加方便。使用set方法可以避免一些潜在的兼容性问题，并且具有良好的可读性和可维护性。

总结来说，使用set方法是Vue框架中一种常见的数据更新方式，可以帮助我们实现数据的响应式、提高性能、避免数据丢失、跟踪数据的变化，并且具有兼容性和易用性的优势。因此，在Vue中使用set方法是一个值得推荐的选择。

在Vue中，使用set方法主要是为了解决响应式数据更新的问题。Vue的响应式系统通过Object.defineProperty或Proxy来实现，这种机制可以监听数据的变化并自动更新视图。然而，由于JavaScript的限制，Vue无法检测到以下情况下数据的变化：

1. 添加一个属性到对象上时，Vue无法监听到这个属性的变化。
2. 直接通过索引设置数组项时，Vue无法监听到数组项的变化。

因此，为了解决这些问题，Vue提供了set方法，它可以用来向响应式对象中添加新的属性或改变已有的属性，并能触发视图的更新。

set方法的用法如下：

Vue.set(obj, propertyName, value)

其中，obj是需要修改的对象，propertyName是属性名，value是要设置的值。

下面是使用set方法的两个典型场景：

场景一：向响应式对象添加新的属性

// 数据定义
data() {
  return {
    obj: {
      name: 'Tom',
      age: 18
    }
  };
},

// 通过点击按钮添加新的属性
methods: {
  addProperty() { 
    Vue.set(this.obj, 'gender', 'male');
  }
}

在上面的代码中，obj是一个响应式对象，初始值包含name和age两个属性。当点击按钮时，通过set方法向obj对象添加了一个新的属性gender，这样Vue就能正确地追踪到该属性的变化并更新视图。

场景二：改变数组中的某一项

// 数据定义
data() {
  return {
    arr: ['apple', 'banana', 'orange']
  };
},

// 通过点击按钮改变数组中的某一项
methods: {
  changeItem() { 
    Vue.set(this.arr, 1, 'pear');
  }
}

在上面的代码中，arr是一个响应式数组，初始值为['apple', 'banana', 'orange']。当点击按钮时，通过set方法将数组索引为1的项从'banana'改为'pear'，这样Vue就能正确地跟踪到该项的变化并更新视图。

总之，在需要操作响应式对象或数组的时候，应当使用set方法来确保数据的变化能被Vue正确地追踪并更新视图。