Vue组件传递Object类型Props失效问题求助

这问题我之前也碰到过，本质是Vue 2响应式系统的特性导致的，我来给你拆解清楚：

核心原因 #

Vue 2的响应式追踪依赖内置的Observer实例（也就是你看到的__ob__标识），只有被这个实例包装的对象，才能被Vue检测到属性变化并触发组件更新。

你的API返回的是原生普通JavaScript对象，它并没有被Vue的响应式系统处理：

• 如果verificationStatuses不是在组件data选项中预先声明的属性，直接赋值API返回的对象时，Vue无法自动将其转换为响应式对象；
• 就算它在data里初始化过，若API返回的对象是被外部代码冻结（比如Object.freeze()）或者未通过Vue的响应式方式创建，也不会带有__ob__标识。

而你手动逐个属性复制的操作，相当于创建了一个全新的对象并赋值给this.verificationStatuses——Vue会自动检测到这个赋值行为，把新对象转换成响应式的（也就是添加__ob__观察者），此时组件能正常识别这个响应式对象，所以可以正常工作。

更简洁的解决方案 #

你不需要手动复制每个属性，有几种更高效的方式让API返回的对象变成响应式：

1. 预先在data中声明属性结构 #

确保verificationStatuses在组件初始化时就存在于data中，Vue会提前为它建立响应式追踪：

data() {
  return {
    verificationStatuses: {
      phone: {},
      id_number: {}
    }
  }
}

之后请求API后，用Object.assign更新内部属性而不是替换整个对象：

// 假设apiResponse是接口返回的数据
Object.assign(this.verificationStatuses, apiResponse.verificationStatuses)

这样Vue能检测到内部属性的变化，同时保持响应式。

2. 使用this.$set转换为响应式 #

如果verificationStatuses是后续动态添加的属性（不在初始data里），可以用this.$set直接将整个对象转为响应式：

// apiData是接口返回的verificationStatuses对象
this.$set(this, 'verificationStatuses', apiData)

3. 序列化反序列化快速生成响应式对象 #

这是一种取巧的方式，通过JSON序列化再反序列化得到新对象，赋值后Vue会自动转为响应式：

this.verificationStatuses = JSON.parse(JSON.stringify(apiData))

⚠️ 注意：这种方式会丢失对象中的函数、Symbol等特殊类型，只适合纯数据结构的对象。

补充说明 #

Vue 2的响应式是基于Object.defineProperty实现的，它只能追踪已存在的属性，对于新增属性或直接替换整个对象的场景，需要通过上述方式确保响应式生效。你手动复制属性的操作本质上是创建了新对象，触发了Vue的响应式转换，所以组件能正常识别。

内容的提问来源于stack exchange，提问作者sina