vue3怎么用this.$set

在 Vue 3 中，使用 `this.$set` 来更新响应式数据的方式与 Vue 2 有所变化。Vue 3 中不再直接使用 `this.$set` 方法来实现响应式属性的添加或修改。相反，你可以使用 `reactive` 函数将普通对象转换为响应式对象。然后，你可以通过访问和修改这个响应式对象的属性来实现类似的效果。

下面是一个示例，展示了如何在 Vue 3 中更新响应式数据：

import { reactive } from 'vue';

export default {
  data() {
    return {
      obj: reactive({
        name: 'John',
        age: 25,
      }),
    };
  },
  methods: {
    updateData() {
      this.obj.name = 'Alice'; // 修改属性
      this.obj.address = '123 Street'; // 添加新属性
    },
  },
};

在上面的示例中，我们通过将普通对象 `obj` 转化为响应式对象来实现数据的响应式更新。然后，你可以直接使用 `this.obj` 来访问和修改它的属性，就像在 Vue 2 中使用 `this.$set` 方法一样。

请注意，使用 `reactive` 函数转换的对象内部是递归的响应式的，这意味着对于嵌套的属性也会实现响应式更新。

希望这个示例能帮助你理解如何在 Vue 3 中更新响应式数据。如果你还有其他问题，请随时提问！