vue中this.$set和vue.set的区别

this.$set 和 Vue.set 的区别在功能上是没有区别的，都是用来响应式地给对象添加一个属性的。区别在于使用场景，this.$set 主要用于在 Vue 实例中使用，而 Vue.set 可以用于任何的 Vue 实例或者非 Vue 对象。同时，this.$set 是实例方法，需要通过 Vue 实例的 $set 方法来调用，而 Vue.set 是静态方法，可以直接调用。

相关问题

vue中this.$set的使用

在Vue中，this.$set是一个用于动态添加响应式属性的方法。通常情况下，当你使用Vue.set或者this.$set来给一个对象添加一个新的属性时，这个属性将不会触发视图的更新。但是，使用this.$set可以确保新添加的属性也能够触发视图的更新。

this.$set的语法如下：
this.$set(object, key, value)

其中，object是要添加属性的对象，key是要添加的属性名，value是要添加的属性值。

下面是一个示例，展示了如何使用this.$set来动态添加属性：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="addProperty">Add Property</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    addProperty() {
      this.$set(this, 'newProperty', 'This is a new property');
    }
  }
};
</script>

在上面的示例中，当点击按钮时，addProperty方法会调用this.$set来给当前组件实例添加一个名为newProperty的属性，并将其值设置为"This is a new property"。由于使用了this.$set，新添加的属性会触发视图的更新，从而在页面上显示出来。

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对象的变化，并更新相关的视图。