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它新增属性没有响应式，vue3新增属性有响应式？

在Vue2中，当实例被创建时，Vue会遍历所有的属性并将其转化为getter/setter形式来实现响应式。但是，对于新增的属性，Vue无法在实例创建时将其转化为响应式的属性。

而在Vue3中，使用了ES6的Proxy代理对象来实现响应式。Proxy可以拦截对象的所有操作，包括属性的读取、设置、删除等。因此，对于新增的属性，只要通过Proxy代理对象来操作，就能实现响应式。