Vue.set怎么用

Vue.set 是 Vue.js 中的一个实例方法，用于向响应式对象添加属性，确保这个新属性同样是响应式的。这在 Vue 2.x 中非常有用，因为 JavaScript 的限制，Vue 无法检测到对象属性的添加或删除。使用 Vue.set 可以确保新添加的属性能够被 Vue 的响应式系统追踪，从而更新视图。

Vue.set 方法的基本用法如下：

this.$set(target, key, value);

- `target`：需要添加属性的目标对象。
- `key`：要添加的属性名。
- `value`：要添加的属性值。

例如，如果你有一个 Vue 实例的 data 对象，并且想添加一个新的属性，你可以这样做：

new Vue({
  data: {
    user: {
      name: 'John',
      age: 25
    }
  },
  created: function() {
    // 在这里添加一个新属性
    this.$set(this.user, 'email', 'john@example.com');
  }
});

这段代码将在 Vue 实例创建后，在 `user` 对象中添加一个 `email` 属性，并且因为使用了 Vue.set，这个新添加的属性会是响应式的，如果视图中有依赖这个属性的部分，它们将会更新。

在 Vue 3.x 中，由于引入了 Proxy 作为 Vue 实例的默认响应式系统，Vue 3.x 已经解决了这个问题，因此不再需要 Vue.set 来添加响应式属性。在 Vue 3.x 中，直接为对象添加属性即可使其变为响应式。