Vue2更新新增的对象属性

在Vue2中，可以通过以下方式新增对象属性：

1. 使用Vue.set()方法

Vue.set(obj, 'newProp', 123)

2. 使用vm.$set()方法

this.$set(this.obj, 'newProp', 123)

其中，obj是要新增属性的对象，newProp是要新增的属性名，123是要赋给属性的值。

需要注意的是，如果要新增的属性是一个对象或数组，需要先在父级对象或数组中创建该属性，然后再通过上述方法添加子属性。否则，Vue将无法追踪该属性的变化。

相关问题

vue3 对象新增一个属性

在 Vue3 中，可以使用 `ref` 或 `reactive` 来创建响应式对象或变量。如果要为一个响应式对象新增一个属性，可以使用 `Vue.set` 方法或者直接给对象赋值。

使用 `Vue.set` 方法示例：

import { reactive, toRefs, Vue } from 'vue'

const state = reactive({ name: 'Tom' })

Vue.set(state, 'age', 18)

直接给对象赋值示例：

import { reactive } from 'vue'

const state = reactive({ name: 'Tom' })

state.age = 18

无论是哪种方式，新增的属性都会成为响应式的，并且会触发视图的更新。

vue2新增属性怎么被监听到

在Vue2中，新增属性可以通过以下两种方式来被监听到：

1. 通过Vue.set方法或者直接使用索引方式来新增属性：可以使用Vue.set方法或者直接通过索引方式（如`this.$set(this.data, 'attr', value)`）来给Vue实例的data对象新增属性。这样新增的属性将会被自动被Vue系统监听到，并进行相应的响应式处理。

示例：

// 在Vue实例的方法中新增属性
methods: {
  addProperty() {
    this.$set(this.data, 'attr', value);
  }
}

或者

// 直接使用索引方式新增属性
this.data['attr'] = value;

2. 通过Vue对象的extend方法来新增属性：可以通过Vue.extend方法来创建一个新的Vue子类，并在该子类中通过定义的方式来新增属性。使用新创建的子类来实例化一个Vue实例，这样新增的属性也会被自动被Vue系统监听到。

示例：

// 创建Vue子类并新增属性
const MyVue = Vue.extend({
  data() {
    return {
      attr: value
    };
  }
});
// 实例化一个Vue实例
new MyVue();

总结：在Vue2中，可以通过Vue.set方法或者直接使用索引方式给Vue实例的data对象新增属性，也可以通过Vue.extend方法创建一个新的Vue子类来新增属性。新增的属性将会被自动监听到，实现响应式处理。