vue2设置在给对象添加属性后，使其为响应式的

在 Vue2 中，如果你想要给一个对象添加属性并将其设置为响应式，你可以使用 `Vue.set(object, key, value)` 或者 `this.$set(object, key, value)` 方法。

举个例子，假设你有一个 `data` 对象：

data: {
  person: {
    name: 'John',
    age: 30
  }
}

如果你想要给 `person` 对象添加一个新的属性 `gender` 并将其设置为响应式，你可以使用以下代码：

Vue.set(this.person, 'gender', 'male');

或者

this.$set(this.person, 'gender', 'male');

这样就可以让 `gender` 属性变成响应式的了。

相关问题

vue3在setup中如何向响应式数组对象中添加属性

您可以使用Vue提供的reactive函数来创建响应式数组对象，然后使用push方法向其中添加属性。示例代码如下：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      list: []
    });

    function addItem() {
      state.list.push({ name: 'item' });
    }

    return {
      state,
      addItem
    }
  }
}

在上面的代码中，我们使用Vue提供的reactive函数创建了一个响应式对象state，其中包含一个空数组list。然后我们定义了一个addItem函数，用于向list数组中添加一个名为item的对象。由于state是响应式对象，因此当我们调用addItem函数时，Vue会自动更新视图以反映list数组的变化。

vue2对象添加属性

在 Vue 2 中，我们可以通过以下两种方式向对象添加属性：

1. 直接使用 `this` 关键字：

this.$set(this.object, 'propertyName', value);

这种方式通过 Vue 提供的 `$set` 方法将属性添加到对象中。Vue 会在内部处理响应式更新，以便在属性被添加后，能够正确地触发视图更新。

2. 使用 `Vue.set` 方法：

Vue.set(this.object, 'propertyName', value);

这种方式与第一种方式类似，只是直接通过 `Vue` 对象调用 `$set` 方法来实现。

需要注意的是，以上两种方式都只能在已经声明为响应式的对象上添加新属性。如果要向非响应式的对象添加属性，可以使用普通的 JavaScript 语法：

this.object.propertyName = value;

但这种方式添加的属性不会被 Vue 监测，也不会触发视图更新。