面试题：为什么 Vue 中给对象添加新属性后界面不刷新？

在 Vue 2 中，当你直接给一个响应式对象添加一个全新的属性时，界面不会自动更新，这是因为 Vue 2 的响应式系统存在“属性添加/删除检测”缺陷。

这个问题在 Vue 3 中已经被彻底解决。

原因分析（以 Vue 2 为主）

Vue 2 的响应式系统是基于 Object.defineProperty() 实现的。

初始化时定义 getter/setter：
- 当 Vue 实例创建时（created 钩子之前），它会遍历 data 对象中的所有属性。
- 使用 Object.defineProperty() 为每一个已存在的属性添加 getter 和 setter。
- 这些 getter 和 setter 负责在数据读取时收集依赖，在数据修改时通知视图更新。
新属性未被“劫持”：
- 当你通过 this.obj.newProperty = 'value' 的方式添加一个新属性时，这个新属性并没有经过 Object.defineProperty() 的处理。
- 它只是一个普通的对象属性，没有绑定 getter 和 setter。
- 因此，Vue 无法追踪到这个属性的变化，也就无法触发视图更新。

示例：

export default {
  data() {
    return {
      user: {
        name: 'Alice'
        // age 属性不存在
      }
    }
  },
  mounted() {
    // ❌ 直接添加新属性，界面不会更新
    this.user.age = 25 // 这个 age 属性不是响应式的！
  }
}

解决方案（Vue 2）

Vue 提供了 Vue.set()（或实例方法 this.$set()）来解决这个问题。

Vue.set(target, propertyName/index, value)
this.$set(target, propertyName/index, value)

这个方法会：

将新属性添加到对象上。
使用 Object.defineProperty() 为这个新属性手动添加响应式（getter/setter）。
触发视图更新。

正确示例：

export default {
  data() {
    return {
      user: {
        name: 'Alice'
      }
    }
  },
  mounted() {
    // ✅ 使用 $set，确保新属性是响应式的
    this.$set(this.user, 'age', 25)

    // 或者使用 Vue.set (如果全局引入了 Vue)
    // Vue.set(this.user, 'age', 25)
  }
}

其他方法：

使用 Object.assign() 或展开运算符：创建一个新对象来替换原对象，因为 Vue 可以检测到对象的替换。

Vue 3 的改进

Vue 3 采用了 Proxy API 重构了响应式系统。

Proxy 的优势：Proxy 可以代理整个对象，能够监听对象的所有操作，包括属性的添加、删除、修改等。
结果：在 Vue 3 中，直接通过 this.obj.newProperty = value 添加新属性，界面会正常刷新，因为 Proxy 能够捕获到这个“添加属性”的操作并触发更新。

Vue 3 示例：

// Vue 3 中，这样写是没问题的！
this.user.age = 25 // ✅ 界面会更新

总结

版本	原因	解决方案
Vue 2	`Object.defineProperty()` 无法检测对象属性的动态添加/删除。	使用 `this.$set()`、`Vue.set()` 或通过创建新对象来替换。
Vue 3	`Proxy` 能够监听所有对象操作，包括属性添加。	可以直接添加新属性，界面会自动更新。

核心要点：这个问题是 Vue 2 响应式系统的局限性所致。在 Vue 2 中，必须使用 this.$set() 来确保动态添加的属性是响应式的。而在 Vue 3 中，这一限制已被消除。

THE END

Vue 基础面试题