vue中 set什么时候用

在Vue中，set通常在以下情况下使用：

1. 当需要在Vue实例中添加新的响应式属性时，可以使用set方法。Vue实例在创建时会将数据对象的所有属性转化为响应式，这意味着只有在初始化时存在的属性才是响应式的，后期添加的属性是不具备响应性的。所以当我们需要动态添加一个属性，并且希望它具备响应性时，需要使用set方法。

2. 当需要修改已存在的数组中的某个元素时，可以使用set方法。Vue无法检测到数组元素的直接修改，比如使用索引直接修改数组元素的值，这时候需要使用set方法来实现。set方法会触发数组的更新。

下面是一些示例代码：

1. 添加新的响应式属性：

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

2. 修改已存在的数组中的元素：

vm.someArray.splice(index, 1, newValue);
//或者
Vue.set(vm.someArray, index, newValue);
//或者
vm.$set(vm.someArray, index, newValue);

需要注意的是，set方法只能用于Vue实例的根数据对象或者组件的data选项中的属性。对于嵌套的属性，可以使用点号或者方括号的形式来进行访问和修改。

在Vue中，set可以在以下情况下使用：

1. 修改对象属性的值：当你需要修改Vue实例中的对象属性值时，可以使用set方法来触发响应式更新。Vue使用Object.defineProperty()将对象的属性转换为getter和setter，当你使用普通方式直接修改对象的属性值时，Vue无法检测到这种变化。但是，通过使用set方法，可以将对象的属性更改通知给Vue，以便进行响应式更新。

2. 添加新属性：当你需要向Vue实例中的对象添加新属性时，使用set方法可以触发响应式更新。通过使用set方法，将新属性添加到对象上，Vue会使这个新属性也能够响应式更新。

3. 动态修改数组：Vue可以检测到对数组的变化，比如push、pop、shift、unshift、splice等方法，但是对于直接通过下标修改数组值的操作，Vue无法检测到这种变化。可以通过使用set方法来修改数组的指定位置的值，并触发响应式更新。

4. 修改数组长度：Vue可以检测到数组的长度变化，比如通过push、pop、shift、unshift、splice等方法修改数组的长度。但是对于修改数组的长度时，直接设置length属性的情况，Vue无法检测到这种变化。你可以通过使用set方法来修改数组的长度，并触发响应式更新。

5. 修改嵌套对象的属性值：当你需要修改嵌套对象中的属性值时，使用set方法可以触发响应式更新。Vue会将嵌套对象的属性转换为getter和setter，通过使用set方法，可以通知Vue进行相应的更新。

总的来说，set方法可以用于修改Vue实例中对象的属性值、添加新属性、修改数组、修改数组长度和修改嵌套对象的属性值，以触发响应式更新。使用set方法可以保证Vue能够准确地追踪和响应这些变化，使界面和数据保持同步。

在Vue中，set主要用于给响应式对象添加新的属性。

在Vue中，当我们使用data选项定义一个响应式对象时，Vue会将其转化成getter和setter函数，从而能够追踪到该对象的属性的变化。这意味着，当我们在模板中访问和修改data中的属性时，Vue会自动进行更新，保持模板和数据的同步。

然而，有时候我们需要在运行时动态地添加一个新的属性到data对象中，这个时候由于Vue无法事先添加getter和setter到这个新的属性上，所以它无法追踪到这个属性的变化，也就无法实现响应式更新。

这个时候，我们就需要使用Vue的set方法来手动将新的属性添加进data对象中，并且使之具备响应式。下面是set方法的使用方法：

Vue.set(object, key, value)

其中，object参数是目标对象，key是要添加的属性名，value是要添加的属性对应的值。

除了Vue.set方法，我们还可以使用全局的set方法来实现相同的效果：

Vue.$set(object, key, value)

使用set方法后，添加的属性将具备响应式，当我们修改这个属性的值时，相关的组件会自动更新。

除了添加属性，set方法还可以用于修改数组中的元素和删除属性，这些操作也会触发相应的更新。

需要注意的是，set方法只能用于添加或者修改已存在的属性，如果我们尝试添加或修改vue实例对象、根data属性或者$props，则不会触发响应式更新。

另外，如果我们需要将多个属性添加到对象中，可以使用Object.assign方法或者ES6中的对象扩展运算符来实现：

Object.assign(object, { key1: value1, key2: value2 })

或者

object = {...object, key1: value1, key2: value2}

这样做的好处是，一次性添加多个属性只会触发一次响应式更新。