vue在什么情况下需要set • Worktile社区

worktile

Worktile官方账号

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

当你需要向响应式对象中添加一个新的属性时，你需要使用set方法。在Vue中，只有在初始化响应式对象时，Vue才能追踪对象的属性。所以如果你在已经初始化的响应式对象上直接添加一个新属性，那么这个属性将不会被响应式系统所追踪。为了解决这个问题，你需要使用set方法来添加这个新属性，这样Vue才能追踪它并对其进行响应。

举个例子，假设你有一个data对象：

data: {
  name: 'John Doe'
}

如果你直接通过data.name = 'Jane Smith'来修改name属性，那么Vue将不会触发组件重新渲染来更新对应的DOM。为了让Vue能够监听到这个属性的变化并更新DOM，你需要使用set方法：

Vue.set(data, 'name', 'Jane Smith');

当你需要在数组中添加或删除元素时，你同样需要使用set方法。Vue可以监听到数组元素的变化，但是如果直接使用索引来修改数组，Vue将无法追踪到这个变化。为了让Vue能够正确地追踪数组的变化，你需要使用set方法。

例如，假设你有一个data对象：

data: {
  fruits: ['apple', 'banana', 'orange']
}

如果你直接通过data.fruits[0] = 'kiwi'来修改数组中的元素，Vue无法触发组件重新渲染来更新DOM。为了让Vue能够监听到这个数组元素的变化并更新DOM，你需要使用set方法：

Vue.set(data.fruits, 0, 'kiwi');

另外，如果你想向数组的末尾添加一个新元素，你可以使用push方法，这样Vue能够正确地追踪到变化。如果你想从数组中删除一个元素，你可以使用splice方法，这同样能让Vue正确地追踪到变化。

总之，当你需要向响应式对象中添加新属性或者对响应式数组进行修改时，你需要使用Vue的set方法。这样能够确保Vue能够正确地追踪对象的变化并进行相应的DOM更新。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在以下情况下，你可能需要使用Vue.set()来修改Vue实例中的响应式数据：

添加新的响应式属性：
当你需要向Vue实例的响应式数据中添加新的属性时，普通的赋值操作是不会触发响应的。这时你就可以使用Vue.set()方法来添加新的响应式属性。例如：
```
Vue.set(vm.someObject, 'newProperty', 123);
```
或者使用扩展运算符：
```
vm.someObject = {
  ...vm.someObject,
  newProperty: 123
}
```
修改数组的长度（响应式地添加或删除元素）：
直接修改数组的长度不会触发视图的更新，你可以使用Vue.set()来增加数组的长度并且使其响应式。例如：
```
Vue.set(vm.someArray, vm.someArray.length, 'newElement');
```
或者使用数组的splice()方法：
```
vm.someArray.splice(vm.someArray.length, 0, 'newElement');
```
在对象或数组中嵌套添加新的属性/元素：
当你需要向嵌套的对象或数组中添加新的属性或元素时，普通的赋值操作也不会触发响应。你可以使用Vue.set()或直接修改所嵌套的数据。例如：
```
Vue.set(vm.someObject.nestedObject, 'newProperty', 123);
```
或者：
```
vm.someObject.nestedObject.newProperty = 123;
```
属性已经在对象中存在，但是需要重新赋值：
当你想要改变对象中已存在的属性的值，并且希望它是响应式的，你可以使用Vue.set()或直接修改所嵌套的数据。例如：
```
Vue.set(vm.someObject, 'existingProperty', newValue);
```
或者：
```
vm.someObject.existingProperty = newValue;
```
在使用v-for渲染的列表中直接修改数组元素：
当使用v-for渲染一个数组时，如果你直接修改数组中的元素，则视图不会自动更新。你可以使用Vue.set()或直接修改所嵌套的数据来确保视图能够更新。例如：
```
Vue.set(vm.someArray, index, newValue);
```
或者：
```
vm.someArray[index] = newValue;
```

需要注意的是，Vue.set()方法只能用于修改已经存在的响应式数据，它无法在Vue实例被创建之后添加新的响应式属性。对于全局的数据对象或组件中的属性，你需要在Vue实例被创建之前将其初始化为响应式数据，或者使用Vue.observable()方法将其包装为响应式数据。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中使用set方法的情况是当我们向响应式对象中添加新的属性时，这个新添加的属性是非响应式的，也就是说当属性的值发生改变时，视图不会随之更新。为了解决这个问题，需要使用set方法手动将属性设置为响应式。

以下是Vue中使用set方法的操作流程：

导入Vue和set方法：

import Vue from 'vue'
import { set } from 'vue'

创建一个响应式对象：

data() {
  return {
    obj: {
      name: 'Alice',
      age: 20
    }
  }
}

想要添加一个新的属性，并使其具备响应式，使用set方法：

methods: {
  addProperty() {
    // 添加一个新的属性
    set(this.obj, 'address', 'Beijing')
  }
}

在需要的地方调用addProperty方法，即可实现新属性的添加和响应式处理：

<template>
  <div>
    <p>{{ obj.name }}</p>
    <p>{{ obj.age }}</p>
    <p>{{ obj.address }}</p>
    <button @click="addProperty">添加新属性</button>
  </div>
</template>

综上所述，在Vue中，当我们在响应式对象中添加新的属性时，使用set方法可以将其设置为响应式，从而实现属性值变化时的自动更新。这是解决Vue中添加新属性不响应的一种常用方法。

2年前 0条评论