vue什么时候使用set

在Vue.js中，set主要用于在响应式对象中添加响应式属性。当我们需要向一个已经创建的响应式对象中添加新的属性时，如果直接使用普通的赋值方式，新添加的属性将不会具备响应式的特性，也就是说当新属性发生变化时，界面不会自动更新。

而使用set方法可以解决这个问题，它会将新添加的属性设置为响应式属性，这样当新属性发生变化时，界面将自动更新。

具体使用set的场景包括但不限于以下几种情况：

1. 动态添加属性：当需要根据用户的输入或其他条件动态添加属性时，可以使用set方法来为对象添加属性并使之具备响应式特性。

2. 异步获取数据：当从后端获取到数据后，需要将数据添加到已有的响应式对象中时，可以使用set方法实现。

3. 需要深度监听属性的变化：set方法可以用于深度监听对象中属性的变化，它会递归地将新属性设置为响应式属性，保证整个对象的变化都能被追踪。

需要注意的是，set方法只能用于响应式对象，即使用Vue的data选项创建的对象。而对于普通的JavaScript对象，set方法无效。

总而言之，Vue中的set方法可以用于给响应式对象动态添加属性并使之具备响应式特性，用于解决动态添加属性不具备响应式的问题。

Vue中的set方法通常在以下情况下使用：

1. 在响应式对象中新增属性：当我们想向一个已定义的响应式对象中添加新属性时，需要使用set方法来确保新属性也能够进行响应式处理。例如：

Vue.set(obj, 'newProperty', value);

set方法会在对象上添加一个新属性，并且确保该属性是响应式的。

2. 在数组中新增元素：当我们想向一个已定义的数组中添加新元素时，同样可以使用set方法。例如：

Vue.set(array, index, value);

set方法会在数组中的指定索引位置插入新元素，并且确保该数组是响应式的。

3. 替换已有的响应式属性：当我们想修改一个已经存在的响应式属性时，通常可以直接对该属性进行赋值操作，但是在某些情况下，直接赋值可能无法触发视图的更新。这时候就可以使用set方法来确保视图能够正确地更新。例如：

Vue.set(obj, 'property', newValue);

set方法会替换对象中已有属性的值，并确保该属性是响应式的。

4. 在嵌套对象中新增属性：当我们想向一个嵌套对象中添加新属性时，需要使用set方法来确保新属性也能够进行响应式处理。例如：

Vue.set(obj, 'nestedProperty.newProperty', value);

set方法会在嵌套对象中创建新属性，并确保该属性是响应式的。

5. 动态属性名：当我们想通过变量来指定属性名时，可以使用set方法。例如：

let property = 'newProperty';
Vue.set(obj, property, value);

set方法允许我们使用变量作为属性名，并且确保该属性是响应式的。

总的来说，set方法在Vue中用于在响应式对象中添加、修改或删除属性，并确保这些属性是响应式的，从而能够正常触发视图的更新。

在Vue中，通过调用Vue实例或组件实例的set方法，可以动态添加响应式属性。一般在以下情况下可以使用set方法：

1. 动态添加属性：当我们需要在运行时动态地向Vue实例或组件实例中添加属性时，可以使用set方法。这样添加的属性会具有响应式特性，即当该属性的值变化时，Vue会自动更新相关的视图。

2. 动态删除属性：当我们需要在运行时动态地删除Vue实例或组件实例中的属性时，可以使用delete运算符来删除属性。这样删除的属性不会再具有响应式特性。

3. 在数组中添加和删除元素：在数组中添加元素时，直接使用push方法可以确保新添加的元素具有响应式特性。但是如果要动态地向数组中的某个位置插入元素或删除元素时，需要使用splice方法来操作数组，并且还需要使用set方法来通知Vue重新计算视图。

下面是使用set方法的一些示例操作：

1. 动态添加属性：

// 创建一个Vue实例
var vm = new Vue({
  data: {
    name: 'Tom'
  }
})

// 动态添加属性
vm.$set(vm, 'age', 20);

console.log(vm.age); // 输出20

2. 动态删除属性：

// 删除属性
vm.$delete(vm, 'age');

console.log(vm.age); // 输出undefined

3. 在数组中添加和删除元素：

// 创建一个Vue实例
var vm = new Vue({
  data: {
    items: ['apple', 'banana', 'orange']
  }
})

// 在数组中添加元素
vm.items.push('grape');

console.log(vm.items); // 输出['apple', 'banana', 'orange', 'grape']

// 在数组中删除元素
vm.items.splice(1, 1);

console.log(vm.items); // 输出['apple', 'orange']

总的来说，使用set方法可以在运行时动态地添加和删除属性，并且还可以在数组中添加和删除元素，并保持响应式。这样可以使Vue的数据和视图保持同步，提供更好的用户体验。