vue什么时候需要用set设置 • Worktile社区

不及物动词

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

在Vue中，使用set方法是为了在修改对象或数组的属性时，能够触发Vue的响应式机制，并更新视图。通常情况下，当我们在修改对象或数组的属性时，Vue会自动检测到变化并更新视图，无需使用set方法。但在以下两种情况下，我们需要使用set方法来更新Vue的响应式数据：

向已经定义的响应式对象中添加新的属性
当我们在已经定义的响应式对象上添加新的属性时，Vue无法自动检测到这个变化。此时，我们需要使用Vue.set方法，或者直接使用原生的JavaScript方法来添加属性。

例如，假设我们有一个data对象如下：

data: {
  person: {
    name: '张三'
  }
}

如果我们想在person对象中添加一个新的属性age，那么需要使用set方法来实现：

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

例如，假设我们有一个data对象如下：

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

如果我们想修改数组中某个索引的值，或者改变数组的长度，需要使用set方法来实现：

Vue.set(this.fruits, 1, 'watermelon'); // 修改数组索引为1的值
Vue.set(this.fruits, 3, 'grape'); // 添加一个新的元素到数组中

需要注意的是，如果我们直接通过下标的方式修改数组，比如this.fruits[1] = 'watermelon'，Vue无法检测到这个变化，不会触发响应式更新。

总结起来，使用set方法的场景主要包括向已经定义的响应式对象中添加新的属性，以及修改数组的索引或长度。在其他情况下，Vue会自动检测到变化并更新视图，不需要使用set方法。

2年前 0条评论

worktile

Worktile官方账号

在 Vue.js 中，当你想要改变一个数据属性的值的时候，通常情况下不需要使用 set 方法。Vue.js 支持响应式系统，会自动追踪数据属性的变化并更新对应的视图。但是在某些特定情况下，你可能需要使用 set 方法来触发属性的更新。

在 Vue 实例的 data 选项中定义的初始数据属性是响应式的。这意味着当你修改这些属性的值时，Vue 会自动追踪变化并更新视图。但是，如果你后续添加了新的属性，Vue 并不会为它们创建响应式绑定。这种情况下，你可以使用 Vue.set 或 this.$set 方法来将新属性添加到响应式对象中，使其具有响应式能力。
当你处理数组时，直接使用索引或 splice 方法进行修改，并不会触发视图的更新。这是因为 Vue 并不能检测到通过数组索引的修改。这时，你可以使用 Vue.set 或 this.$set 方法来手动通知 Vue 数组的变化。
在 Vue 组件中，如果你定义了一个局部的响应式数据属性，而且你希望这个属性被其他组件所共享，那么你需要使用 Vue.set 或 this.$set 方法将其添加到一个 Vue 实例的根数据对象上。这样，其他组件就可以访问并修改这个属性。
当你使用对象展开运算符 ... 来创建一个新对象时，这个新对象并不会具有响应式能力。在这种情况下，你可以使用 Vue.set 或 this.$set 方法将这个新对象中的属性添加为响应式属性。
如果你在一个计算属性中对一个响应式属性进行修改，并且期望修改在下次计算属性的求值时生效，你可以使用 Vue.set 或 this.$set 方法来确保修改能够被 Vue 追踪。

总之，使用 set 方法的场景是在想要动态添加、修改或删除响应式对象的属性时，手动通知 Vue 更新视图。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，使用set函数是为了确保响应式数据的正常更新。当我们对响应式对象中的属性进行修改时，Vue会自动跟踪这些修改并进行响应式更新。但是，当我们向一个响应式对象中添加一个新的属性时，Vue无法自动进行追踪。这就是我们需要使用set方法的时候。

set方法可以在一个已经响应式的对象上添加一个新的属性，并且能够确保这个新属性是响应式的。这样一来，当这个新属性发生变化时，Vue会能够对其进行追踪并进行响应式更新。

下面是使用set方法的一般流程：

import { set } from 'vue';

data() {
  return {
    obj: {
      key: value
    }
  }
}

this.$set(this.obj, 'newKey', newValue);

通过以上步骤，我们就能够将一个新的属性添加到已有的响应式对象中，同时也确保了新属性的响应式更新。

需要注意的是，set方法仅能用于已经进行了响应式处理的对象上，对于非响应式对象或者Vue实例上的属性，set方法不起作用。

另外，Vue3中提供了更加简便的API，使用reactive函数可以将普通对象转换为响应式对象，无需再使用set方法进行属性的添加。

2年前 0条评论