如何在 Vue 3 中执行 Vue.set()？

在Vue 3中，原先Vue 2.x版本里的 Vue.set 方法已经不再需要了，因为Vue 3使用了基于Proxy的响应式系统，它自然地支持响应式地处理对象的添加或删除属性。

在Vue 2.x中，如果你想要向响应式对象添加一个新属性并保持响应性，你需要使用 Vue.set 函数，或者使用实例方法 $set。但在Vue 3中，直接使用标准的JavaScript方式添加属性，Vue的响应式系统可以自动检测到这些变化。

示例

假设你有一个Vue 3组件，其data函数返回一个对象，该对象初始时没有某些属性：

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三'
      }
    };
  }
}

如果你想在某个方法中添加一个新的属性 age 到 userProfile 对象，并保持其响应性，你可以直接这样做：

javascript
methods: {
  addAge() {
    this.userProfile.age = 30;
  }
}

当你这样做时，userProfile 对象将自动更新，并且界面也会相应地更新，展示新添加的 age 属性。

注意

虽然Vue 3的响应式系统自动支持这种操作，还是有一些注意事项：

• 最好在对象创建时就定义好所有的属性，这样可以提高性能和代码的可读性。
• 如果你有一个非常大的对象或数组，并且你只更新了其中很小的一部分，那么使用Vue 3的 reactive 或 ref 来封装这些对象，并按需修改它们，可能会是一个更高效的选择。

总之，Vue 3的响应式系统为开发者提供了更多的灵活性和强大的功能，使得开发更加方便和高效。