vue为什么用set添加新属性

Vue使用set方法来添加新属性，主要是为了解决Vue响应式系统的限制。下面从两个方面解释为什么要使用set来添加新属性。

1. 响应式系统的原理
   Vue的响应式系统通过拦截对象的访问和修改来实现属性的依赖收集和自动更新。在初始化Vue实例时，Vue会将数据对象转化为响应式对象，通过Object.defineProperty方法劫持对象的属性访问，当访问或修改属性时触发依赖更新。

2. 响应式系统的限制

2.1 对象属性添加
Vue只能对已经存在的属性进行响应式处理，对于后续添加的属性，Vue无法给予相应的响应式支持。这是因为当Vue将数据对象转化为响应式对象时，会通过Object.defineProperty方法定义对象的属性，并给属性添加getter和setter来实现依赖追踪。

2.2 数组变动检测
Vue对数组的变动做了一些特殊处理，可以通过一些特定的数组方法（如push、pop、shift等）来触发数组的响应式更新。但是对于直接通过索引更改数组的值或添加新的索引的情况，Vue无法检测到变动。

为了解决这些响应式系统的限制，Vue提供了set方法。

3. 使用set方法添加新属性
   set方法是Vue全局方法，可以通过Vue.set或this.$set来使用。它可以用来向响应式对象中添加新属性，并确保新属性是响应式的。

使用方式如下：

Vue.set(obj, key, value);
// 或者
this.$set(this.obj, key, value);

通过使用set方法，Vue会在对象上添加一个新的响应式属性，并触发视图的更新。这样可以在后续对新属性进行访问或修改时，保证响应式系统正常工作。

总结：
Vue使用set方法来添加新属性是为了克服响应式系统的限制，确保新属性是响应式的，从而实现数据和视图的同步更新。

在 Vue 中，为对象动态添加属性时，我们通常会使用 set 方法。这是因为 Vue 在数据劫持（响应式）过程中，只会对已经存在的属性进行劫持，而不会对新增的属性进行劫持。所以，如果直接使用赋值的方式来添加新属性，这个属性就不会被 Vue 监测到变化，也就无法触发视图的更新。

以下是为什么要使用 set 方法来添加新属性的几个原因：

1. 响应式追踪：Vue 在对象的 getter 和 setter 中实现了依赖追踪机制，通过 getter 追踪依赖，通过 setter 来触发更新。Vue 只会对响应式数据中已存在的属性进行劫持，因此，如果直接通过赋值的方式添加新属性，Vue 就无法进行追踪，也就无法实现响应式。

2. 响应式更新：通过 set 方法添加新属性时，Vue 会对该新属性进行劫持，并将其设置为响应式的。这意味着当新属性的值发生变化时，Vue 会自动检测并更新视图。

3. 避免警告：如果直接通过赋值的方式添加新属性，Vue 会给出一个警告，提示开发者该属性未被定义。为了避免这个警告，我们应该使用 set 方法来添加新属性。

4. 动态添加属性：有时，我们需要在运行时动态地添加属性。通过 set 方法，我们可以根据需要在对象上添加新属性，而不需要在声明时就将所有可能的属性都定义好。

总之，使用 set 方法来添加新属性可以确保新属性被及时响应，并能够触发视图的更新。这是 Vue 实现响应式的重要机制之一。

在Vue中，我们通常使用数据驱动视图的方式来构建用户界面。当我们通过Vue实例化一个对象时，Vue会自动将其转换成响应式对象，这意味着当我们修改这个对象的属性时，相关的视图将会自动更新。但是，Vue对已经存在的属性进行响应式处理，对于新添加的属性则默认不做响应式处理。这就是为什么在Vue中如果需要给一个已经存在的对象添加新属性的时候，我们需要使用Vue提供的set方法来手动添加这个新属性。

使用set方法的优势有以下几点：

1. 保证新添加的属性是响应式的：通过使用set方法来添加新属性，Vue会自动将这个新属性转换成响应式属性。这意味着当我们修改这个新属性时，相关的视图将会自动更新。
2. 避免对象属性丢失：如果我们直接给一个已经存在的对象添加新属性，那么这个新属性将不会有响应式效果。这意味着当我们修改这个新属性时，相关的视图不会更新。而使用set方法，可以确保新属性具有响应式效果，并且不会丢失对象的其它属性。
3. 适用于动态添加属性：使用set方法，我们可以在运行时动态添加属性。这对于需要根据用户输入或其他条件来生成属性的情况非常有用。

具体的操作流程如下：

1. 首先，我们需要通过Vue的实例化方法创建一个Vue对象。这个对象可以是一个简单的对象，也可以是一个从Vue组件继承的子类。
2. 在需要添加属性的地方，使用Vue.set方法来添加新属性。Vue.set方法的语法如下：
   Vue.set(obj, propertyName, value)
   • obj: 要添加属性的对象
   • propertyName: 新属性的属性名
   • value: 新属性的属性值
3. 在需要使用新属性的地方，直接使用该属性即可。Vue会自动将该属性转换成响应式属性，并且在修改该属性时更新相关的视图。

下面是一个示例代码，演示了如何使用set方法来给一个已经存在的对象添加新属性：

var obj = {
  name: 'John',
  age: 25
}

// 使用Vue.set方法给obj添加一个新属性
Vue.set(obj, 'gender', 'Male');

// 修改新属性的值
obj.gender = 'Female';

// 这里的视图将会自动更新，显示新的gender属性值

需要注意的是，set方法只适用于在已经存在的对象上添加新属性。对于数组，我们需要使用Vue提供的专门的方法，如Vue.set或splice方法来添加新元素，以确保数组的响应式更新。