vue 什么时候用 set • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue中的set方法，主要用于向响应式对象添加新属性时，能够让这个新属性也是响应式的。

在Vue中，当我们在data中定义的对象或数组发生变化时，Vue会自动响应并更新视图。但是，如果我们直接向一个已经存在的对象中添加属性，或者修改一个已经存在的数组中的元素，Vue并不能自动追踪并更新视图。

这就是出现set方法的原因。通过set方法，我们可以将新增的属性转化为响应式的，让Vue能够追踪并更新视图。

下面是一个简单的示例：

// 在Vue实例中定义data
data() {
  return {
    user: {
      name: '张三',
      age: 25,
    },
  };
},

// 在方法中使用set
methods: {
  changeName() {
    this.$set(this.user, 'height', 180);
  },
},

在上面的示例中，我们在data中定义了一个名为user的对象，包含了name和age两个属性。然后，在changeName方法中使用set方法，将height属性添加到user对象中。

如果不使用set方法，直接使用this.user.height = 180添加属性，Vue并不能追踪并更新视图。但是通过set方法，我们能够让height属性也是响应式的，当它发生变化时，Vue能够自动更新视图。

需要注意的是，set方法只能用于对象或数组，不能用于基本数据类型，比如字符串、数字等。

总结起来，Vue中的set方法主要用于在响应式对象中添加新属性时，让这个新属性也是响应式的，使Vue能够追踪并更新视图。

1年前 0条评论

worktile

Worktile官方账号

在Vue.js中，set方法用于对Vue实例的属性进行响应式地设置值。我们通常使用set方法来修改Vue实例的属性，而不是直接赋值。以下是在哪些情况下使用set方法的一些示例：

当需要在Vue实例的嵌套属性上进行修改时，需要使用set方法。这是因为Vue无法检测到直接赋值的变化。例如，如果有一个名为obj的data属性，它包含了一个嵌套的属性innerObj，要修改innerObj的值，应该使用set方法来通知Vue进行响应式更新。

Vue.set(this.obj.innerObj, 'key', value);

当需要动态地添加一个新的属性到Vue实例中时，应该使用set方法。这是因为Vue无法检测到通过直接属性赋值添加的新属性。例如，如果有一个名为obj的data属性，要添加一个新属性newKey，应该使用set方法来通知Vue进行响应式更新。

Vue.set(this.obj, 'newKey', value);

在使用Vue开发组件时，如果需要在组件的计算属性或方法中修改props的值，需要使用set方法。这是因为在Vue组件中，props是只读的，不能直接被修改。使用set方法可以通知Vue在组件初始化时将props的值复制到实例中，然后再进行响应式地修改。

this.$set(this.someProp, 'key', value);

当需要在Vue实例的数组中修改元素时，应该使用set方法。这是因为Vue无法检测数组下标的改变。使用set方法可以通过修改数组元素的值来通知Vue进行响应式更新。

Vue.set(this.array, index, value);

在使用Vue开发中，有时需要手动触发组件的重新渲染。此时可以使用set方法来修改组件的data属性值，从而触发组件的重新渲染。

综上所述，Vue的set方法主要用于对Vue实例的属性进行响应式地设置值。在需要修改Vue实例属性的嵌套属性、动态添加新属性、修改props的值、修改数组元素值以及手动触发组件重新渲染的情况下，我们应该使用set方法来通知Vue进行响应式更新。

1年前 0条评论

不及物动词

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

在Vue中，我们通常使用set方法来更新对象的属性，特别是当我们需要在对象上添加新属性时。

set方法是Vue实例上的一个方法，需要传入三个参数：对象、属性名和新值。它会将传入的新值设置给指定的属性，并触发响应式更新。

下面是一些使用set的常见场景和操作流程：

添加新属性

有时候，在Vue实例创建后，我们需要动态地给对象添加新的属性。这时候，我们可以使用set方法来添加新属性。以下是操作流程：

在Vue实例的data中，定义一个对象，并初始化一些属性。
在需要添加新属性的地方，使用set方法添加新属性。例如，Vue.set(obj, 'newProp', 123)。
Vue会将新属性添加到对象中，并触发响应式更新。

// Vue实例
new Vue({
  data: {
    obj: {
      prop1: 'hello',
      prop2: 'world'
    }
  },
  methods: {
    addNewProperty() {
      // 添加新属性
      Vue.set(this.obj, 'newProp', 123);
    }
  }
})

数组中的对象属性

在Vue中，如果对象是数组的一部分，我们不能直接使用set方法来更新这个对象的属性。这是因为Vue无法对数组中的对象属性进行观察。但是，我们可以使用$set方法来实现类似的效果。

以下是操作流程：

在Vue实例的data中，定义一个数组，并初始化一些对象。
在需要更新对象属性的地方，使用$set方法来更新。
$set方法接收三个参数：数组、索引和新值。

// Vue实例
new Vue({
  data: {
    arr: [
      { name: 'Alice', age: 20 },
      { name: 'Bob', age: 25 }
    ]
  },
  methods: {
    updateProperty(index, newValue) {
      // 更新数组中对象的属性
      this.$set(this.arr[index], 'age', newValue);
    }
  }
})

嵌套对象属性

当我们需要修改对象的嵌套属性时，也可以使用set方法。

以下是操作流程：

在Vue实例的data中，定义一个嵌套对象，并初始化一些属性。
使用set方法来更新嵌套属性。属性名称可以是一个带点的字符串或一个数组，用于指定嵌套属性的路径。
set方法会递归地遍历对象的嵌套属性，并将新值设置给指定的属性。

// Vue实例
new Vue({
  data: {
    nestedObj: {
      prop1: {
        subProp1: 'hello',
        subProp2: 'world'
      },
      prop2: 'foo'
    }
  },
  methods: {
    updateNestedProperty() {
      // 更新嵌套属性
      Vue.set(this.nestedObj, 'prop1.subProp1', 'new value');
    }
  }
})

总结：
在Vue中，我们可以使用set方法来更新对象属性，特别是在需要添加新属性或修改嵌套属性时。使用set方法可以保证Vue能够进行响应式更新，并确保视图正确反映数据的变化。在数组中的对象属性的情况下，我们可以使用$set方法来更新对象的属性。

1年前 0条评论