为什么要用vue.set

Vue.set用于在Vue实例中给响应式对象添加新的属性，以确保新属性也是响应式的。当我们需要在Vue实例中动态添加属性时，直接使用赋值的方式是无效的，新添加的属性不会被Vue响应式系统检测到。而使用Vue.set可以解决这个问题。

Vue的响应式系统是通过Object.defineProperty来实现的，它只能劫持已经存在的属性。Vue.set的作用就是在Vue实例中给对象添加新的属性，并且让这个新属性也具有响应式。Vue.set接收三个参数：要添加属性的对象，要添加的属性名，要添加的属性值。

使用Vue.set的好处主要有以下几点：

1. 响应式更新：Vue.set通过Vue的响应式系统来添加新属性，确保新属性的变化能够被检测到，并及时更新视图。如果直接使用赋值的方式添加新属性，Vue无法追踪新属性的变化，无法及时更新视图。

2. 动态添加属性：Vue.set可以在Vue实例运行时动态添加属性。在某些场景下，我们可能需要根据业务需求动态添加一些属性，Vue.set提供了一个简洁方便的方法来实现这个功能。

3. 嵌套属性响应式：使用Vue.set可以方便地在嵌套对象中添加新的属性，并确保新属性也具有响应式。例如，当我们有一个嵌套对象的数据结构时，直接给内部对象的属性赋值是无效的，需要使用Vue.set来实现。

需要注意的是，Vue.set只能用于对象，不能用于数组。对于数组，我们可以使用Vue提供的变异方法（例如push、pop、splice等）来实现响应式的更新。

Vue.set 是 Vue.js 提供的一个全局方法，它的作用是在响应式对象上添加一个属性，并确保这个属性是响应式的。

1. 动态添加属性：Vue.set 可以用于动态地给一个已经定义的响应式对象添加新的属性。在 JavaScript 中，如果直接给一个对象添加新的属性，这个新属性是非响应式的，也就是说当属性的值发生变化时，对应的视图不会进行更新。而通过 Vue.set 添加的属性是响应式的，当属性的值变化时，对应的视图会自动更新。

2. 响应式数组：在使用 Vue.js 的时候，有时我们需要对数组进行动态操作，比如向数组中添加元素或删除元素。使用 Vue.set 可以确保对数组做出的变动也是响应式的。因为 Vue.js 并不能侦测到数组的变化，所以在直接向数组中添加元素或删除元素时，不会触发视图的更新。通过使用 Vue.set，Vue.js 就可以检测到数组的变化，并更新对应的视图。

3. 避免触发视图更新：Vue.set 还可以用于避免触发不必要的视图更新。当我们通过直接改变数组的索引进行赋值时，会触发视图的更新。而使用 Vue.set 可以避免这种情况，因为 Vue.set 会判断新赋值与原来的值是否相等，如果相等就不会触发视图更新。

4. 动态创建响应式属性：有时候我们需要动态地根据属性名称来创建响应式的属性。通过使用 Vue.set，我们可以根据属性名称动态地为一个对象创建一个响应式的属性。

5. 遵循 Vue.js 的响应式原则：Vue.js 的响应式系统是基于观察者模式实现的，通过观察数据的变化来自动更新视图。而使用 Vue.set 可以保证添加的属性也遵循这个响应式的原则，确保数据的变化能够正确地反映到视图上。

综上所述，Vue.set 的作用是在响应式对象上添加属性，并确保这个属性是响应式的，它可以用于动态添加属性、操作响应式数组、避免触发视图更新、动态创建响应式属性以及遵循 Vue.js 的响应式原则。

Vue.set是Vue框架提供的一个方法，用于在响应式对象中添加一个新属性或修改已有属性的值，确保这些操作同样会触发视图的更新。

在Vue中，响应式对象是指那些通过Vue的数据双向绑定机制（即使用了Vue实例的data选项）来管理的对象。对于这些对象，当其属性的值发生变化时，Vue会自动追踪这些变化，并在视图中更新对应的DOM。

然而，Vue有个限制：它只能检测到响应式对象已有的属性的修改，对于新增的属性或修改数组索引的方式，Vue是无法自动检测到变化的。这是由JavaScript的限制所决定的。Vue.set就是为了解决这个问题而存在的。

在Vue中使用Vue.set方法，可以确保新增的属性能够被Vue检测到变化，并触发视图的更新。具体步骤如下：

1. 导入Vue：首先，需要在文件中导入Vue，以便能够使用Vue的方法。

import Vue from 'vue';

2. 使用Vue.set：然后，可以在Vue实例中的方法中使用Vue.set来添加或修改属性的值。

Vue.set(obj, propertyName, value);

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

例如，在Vue实例的data选项中有一个名为person的对象，我们想要给person对象添加一个名为age的属性，可以使用下面的代码：

Vue.set(this.person, 'age', 20);

3. 数组的使用：对于数组中的新增属性或修改数组索引，同样可以使用Vue.set来实现。但由于数组的特殊性，Vue同样提供了Vue.set的简写方法：this.$set。

Vue.set(array, index, value);
或
this.$set(array, index, value);

例如，对于Vue实例中的data选项中有一个名为items的数组，我们想要给数组的索引为0的位置设置新的值，可以使用下面的代码：

Vue.set(this.items, 0, '新的值');
或
this.$set(this.items, 0, '新的值');

综上所述，使用Vue.set方法可以确保新增的属性或修改属性值的操作能够被Vue检测到变化，并触发视图的更新，解决了Vue无法自动检测到这些变化的限制。特别是在需要动态添加属性的情况下，Vue.set是一个非常有用的方法。