vue中的Vue.set()和Vue.$set()

Vue.set 和 Vue.$set 都是用于在 Vue 实例中动态添加响应式属性的方法。它们的作用是相同的，都可以实现给对象或数组添加新的属性或元素，并确保添加后的属性或元素是响应式的。

区别在于使用方式和调用方式：

Vue.set 是全局方法，可以直接通过 Vue.set(obj, key, value) 的方式调用，其中 obj 是要添加属性的对象，key 是属性名，value 是属性值。例如：Vue.set(this.obj, 'name', 'John')。

Vue.$set 是实例方法，需要通过 Vue 实例来调用，即 this.$set(obj, key, value)。其中 this 是 Vue 实例的引用，obj 是要添加属性的对象，key 是属性名，value 是属性值。例如：this.$set(this.obj, 'name', 'John')。

总的来说，它们的作用和效果是相同的，只是调用方式略有不同。推荐在组件内使用 this.$set 来添加响应式属性，因为它直接绑定到当前组件实例上。而 Vue.set 则适用于在全局范围内添加响应式属性。

举例：假设有一个 Vue 组件，其中有一个对象 person，需要动态添加一个新的属性 age。可以使用 Vue.set 或 Vue.$set 来实现：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <button @click="addAge">Add Age</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'John'
      }
    };
  },
  methods: {
    addAge() {
      // 使用 Vue.set
      Vue.set(this.person, 'age', 25);

      // 或者使用 Vue.$set
      this.$set(this.person, 'age', 25);
    }
  }
};
</script>

在上面的示例中，当点击按钮时，调用 addAge 方法，使用 Vue.set 或 Vue.$set 将 age 属性添加到 person 对象中，并赋值为 25。这样，age 属性就成为了响应式的，当 age 的值改变时，相关的视图也会自动更新。