vue中this.$set怎么用

在Vue中，使用this.$set方法可以将一个非响应式的对象或数组转化为响应式的。其语法如下：

this.$set(object, propertyName, value)

其中，object是要更新的对象，propertyName是要更新的属性名，value是要更新的新值。

举个例子，假设有一个数据data，它是一个对象，并且其中有一个属性name：

data: {
  name: 'Tom'
}

在组件中，如果需要动态更新name属性，可以使用this.$set方法：

this.$set(this.data, 'name', 'Jerry');

这样，name属性就会被更新为'Jerry'，并且会触发视图的重新渲染。

需要注意的是，如果对象是嵌套的，也需要使用this.$set方法来更新内部属性，否则内部属性的变化不会被检测到。

相关问题

vue3 中this.$set

在Vue 3中，`this.$set`方法已经被移除了。Vue 3采用了基于Proxy的响应式系统，不再需要使用`$set`来动态添加响应式属性。

相反，你可以直接使用常规的JavaScript语法来添加响应式属性。例如，如果你有一个对象`data`，你可以像这样添加一个新的属性：

this.data.newProperty = 'new value';

这将自动将`newProperty`变为响应式属性，并且在视图中进行更新。

如果你需要在数组中添加元素并保持响应式，你可以使用数组的方法，比如`push`、`pop`、`shift`、`unshift`等。例如：

this.array.push('new element');

这样做会自动更新视图。

vue中this.$set是

在Vue中，this.$set是一个用于动态添加响应式属性的方法。通常情况下，当我们给一个已经创建的对象添加一个新的属性时，Vue无法检测到这个变化。但是通过使用this.$set方法，我们可以手动告诉Vue去追踪这个属性的变化。

this.$set方法接受三个参数：对象、属性名和属性值。它会将属性名和属性值添加到对象中，并且使其成为响应式的。这意味着当属性值发生变化时，Vue会自动更新相关的视图。

下面是一个示例代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  methods: {
    updateMessage() {
      this.$set(this.obj, 'message', 'Hello Vue!');
    }
  }
};
</script>

在上面的代码中，我们通过点击按钮来调用updateMessage方法，该方法使用this.$set将message属性添加到obj对象中，并将其值设置为'Hello Vue!'。由于使用了this.$set方法，Vue能够检测到obj对象的变化，并更新相关的视图。