vue2中，我在原有的属性中新加一个属性，它可以监听到吗

在 Vue 2 中，直接在原有的属性中新加一个属性，默认情况下无法被 Vue 的响应式系统监听到。

这是因为 Vue 2 在初始化数据时，会使用Object.defineProperty()方法将数据对象的属性转换为响应式数据。这个过程只会遍历对象现有的属性，而不会对后续新增的属性进行处理。

例如，有一个data对象：

javascript

data() {
  return {
    user: {
      name: 'John'
    }
  }
}

如果之后尝试添加一个新属性：

javascript

this.user.age = 30;

Vue 2 不会自动对user.age进行响应式处理，所以当age属性变化时，视图不会自动更新。

要让新增的属性也能被 Vue 监听到，有以下两种常见的方法：

• 使用Vue.set()或this.$set() ：这两个方法是等价的，Vue.set()是全局方法，this.$set()是组件实例方法。可以使用它们来添加响应式属性，例如Vue.set(this.user, 'age', 30)或this.$set(this.user, 'age', 30)。
• 将新属性添加到初始化数据中：在data函数返回的对象中，提前定义好可能会使用到的属性，即使初始值为null或undefined，这样 Vue 在初始化时就会将其转换为响应式属性。例如：

javascript

data() {
  return {
    user: {
      name: 'John',
      age: null
    }
  }
}

然后再给age赋值，这样age属性就是响应式的了。

分享

如何使用Vue.set()或this.$set()方法添加响应式属性？

Vue3中是如何实现对新增属性的响应式监听的？

在Vue2中，使用v-for循环遍历数组时，如何正确地添加或删除元素以保持响应式？