vue在什么场景下使用set赋值 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue在响应式数据中使用set方法的场景主要是在以下两种情况下：

动态添加属性

当我们需要在已有的响应式对象上添加新的属性时，直接使用赋值语句（例如：vm.obj.key = value）是不会触发视图更新的。这是因为 Vue 在实例化时会使用 Object.defineProperty 将数据对象的属性转化为 getter/setter，但是这个方法只能对已有的属性进行转化，对于后添加的属性是没有办法进行响应的。

为了解决这个问题，Vue提供了set方法。通过set方法，我们可以手动将新属性添加到对象上，并且让它也具有响应式的特性。

示例：

// 创建Vue实例
var vm = new Vue({
  data: {
    obj: {
      name: 'Vue',
      version: '2.6.10'
    }
  }
})

// 使用set方法添加新属性
Vue.set(vm.obj, 'author', 'Evan You')

通过上述代码，我们在vm.obj对象上成功添加了一个名为'author'的新属性。这个新属性也会具有响应式的特性，当其值发生改变时，对应的视图也会自动更新。

数组方法

在Vue中，数组也是响应式的。然而，由于JavaScript的限制，Vue无法检测到数组索引和长度的变化。所以，如果我们直接通过数组索引修改数组元素的值或新增/删除数组元素，视图是不会自动更新的。

为了解决这个问题，Vue提供了一系列的数组方法，这些方法在修改数组时同时也触发了视图的更新。

示例：

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

// 通过set方法修改数组元素
Vue.set(vm.list, 1, 'grape')

// 使用数组方法
vm.list.splice(3, 0, 'melon')

通过上述代码，我们成功修改了数组list的第二个元素为'grape'，并在数组末尾添加了一个新的元素'melon'。这些修改操作都会触发视图的更新。

总结来说，Vue的set方法主要用于解决动态添加属性和数组修改问题时的响应式更新。在开发中，当需要对Vue实例的数据进行这些操作时，建议使用set方法，以保证视图的正确更新。

1年前 0条评论

不及物动词

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

Vue 中的 set 方法用于给响应式对象添加一个响应式属性。通常情况下，我们使用 Vue 提供的 "双向绑定" 功能可以自动追踪并更新视图中的数据。但在某些情况下，如果我们直接给一个对象添加一个新的属性，并且希望该属性也能够被 Vue 追踪并及时更新视图，就需要使用 set 方法。

下面是一些使用 Vue 中的 set 方法的场景：

动态添加属性：使用 set 方法可以在运行时给一个对象添加一个新的属性，这个新属性会成为响应式属性，从而触发视图的更新。例如，在一个表单中动态添加输入字段。
使用 v-for 渲染的数组新增元素：当使用 v-for 渲染一个数组时，如果在运行时向这个数组中新增一个元素，这个元素不会被自动追踪和更新。此时，可以使用 set 方法将新增的元素设置为响应式属性，从而更新视图。
异步获取数据后更新视图：在某些情况下，我们需要异步获取数据后更新视图。如果获取到的新数据是一个对象，并且需要把这个对象添加到 Vue 实例中进行响应式更新，则需要使用 set 方法。
动态修改对象的属性值：在 Vue 中，如果需要动态修改一个对象的属性值，并且希望这个修改能够被追踪和更新视图，可以使用 set 方法。
深度嵌套的对象操作：当我们操作一个深度嵌套的对象时，如果直接给某个嵌套的属性赋值，是无法触发响应式更新的。这时，需要使用 Vue 提供的 set 方法，对嵌套对象进行赋值，从而触发更新。

需要注意的是，set 方法只能用于添加响应式属性，不能用于替换一个已有的属性值。如果需要替换属性值，请使用 Vue.set 或直接赋值的方式。另外，set 方法只能在 Vue 的实例上使用，不能用于普通的 JavaScript 对象。

1年前 0条评论

worktile

Worktile官方账号

Vue中的set方法在以下场景下使用：

在响应式对象中添加属性：
当我们使用Vue实例的data属性声明响应式对象时，Vue会自动将data中的属性转换为响应式对象，这样当属性发生变化时，视图会自动更新。然而，如果我们想要在运行时动态地添加属性，这些属性不会自动成为响应式对象。这时就可以使用Vue的set方法来将属性添加到响应式对象中。
在嵌套对象中添加属性：
在Vue中，嵌套对象不会自动成为响应式对象。如果我们想要在嵌套对象中添加属性并保持响应式，可以使用set方法。
在数组中添加新元素：
在Vue中，通过改变数组的长度或使用索引来添加新元素，不会触发视图的更新。如果我们想要在数组中添加新元素并保持响应式，可以使用set方法。

使用set方法的操作流程如下：

导入Vue库：
在使用set方法之前，首先需要在文件中导入Vue库。
使用set方法：
使用Vue.set或this.$set来调用set方法。参数包括要添加属性的对象、要添加的属性名、以及属性的值。

下面是一个示例代码，演示了在Vue中使用set方法的场景：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="addProp">添加属性</button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      obj: {
        name: 'Tom',
      },
    };
  },
  computed: {
    message() {
      return this.obj.age ? `我今年${this.obj.age}岁了` : '我还没有年龄';
    },
  },
  methods: {
    addProp() {
      Vue.set(this.obj, 'age', 18);
    },
  },
};
</script>

在上面的示例中，我们在Vue实例的data属性中声明了一个响应式对象obj，它包含一个name属性。在模板中使用了message计算属性来展示obj的年龄信息。通过点击按钮，调用addProp方法，在obj对象中动态添加了一个age属性并赋值为18。由于obj对象是响应式的，当添加属性后，message计算属性会自动更新，视图中的文本也会改变。

总结：
在Vue中，set方法用于将属性添加到响应式对象中，可以解决一些特定的场景下的响应式问题，如动态添加属性、嵌套对象属性和数组元素。通过调用Vue.set或this.$set方法，可以实现在运行时动态地为对象添加属性，并保持视图的响应式更新。

1年前 0条评论