Props 传入的对象属性增加了却不更新？教你响应式原理的避坑点-Vue.js-PHP中文网

根本原因是Vue响应式系统无法自动追踪对象新增顶层属性，需初始化声明或用$set/reactive确保响应性；props只读，应通过emit通知父组件更新。

props 传入的对象属性增加了却不更新？教你响应式原理的避坑点

Vue 中 props 传入的对象属性增加后视图不更新，根本原因在于：Vue 的响应式系统无法自动追踪对象上新增的顶层属性（尤其是通过 . 或 [''] 直接添加），除非该属性在 data 初始化时已声明，或使用 Vue 提供的响应式 API 显式定义。

对象新增属性不会触发更新

当你这样写：

this.obj.newField = 'hello'  // ❌ 不会触发视图更新

即使 obj 是响应式的，newField 是运行时新增的顶层属性，Vue 2 的 Object.defineProperty 机制无法捕获它；Vue 3 的 Proxy 虽能拦截，但仅对已存在 key 的读写有效，新增 key 仍需通过 Vue.set（Vue 2）或 reactive + set（Vue 3）确保响应性。

Vue 2：用 this.$set(this.obj, 'newField', 'hello') 或 Vue.set(this.obj, 'newField', 'hello')
Vue 3（Composition API）：用 const obj = reactive({})，再通过 obj.newField = 'hello' 即可（Proxy 支持新增属性响应），但前提是 obj 本身是 reactive 创建的，而非普通对象。
若传入的是父组件的原始对象（非 reactive/ref 包裹），子组件接收后修改也不会影响响应链 —— 需确认 props 是否来自响应式源。

Props 是只读的，直接改不生效也不推荐

Vue 规定 props 应视为只读。即使你成功给 props 对象加了新属性，比如：

props.obj.newField = 'test'  // ⚠️ 技术上可能“成功”，但违背设计原则，且在严格模式下报错

这不仅破坏单向数据流，还可能导致：

父组件状态与子组件视图不同步（父未重传，子却改了）
开发环境下 Vue 发出警告：Attempting to mutate a prop directly
SSR 或某些优化场景下行为异常

正确做法是：子组件通过 $emit 通知父组件更新，由父组件决定如何修改源数据。

深层嵌套对象的响应性容易被忽略

即使对象初始有完整结构，如果某一层是 null 或 undefined，后续赋值仍可能失效：

// 初始
data() {
  return {
    user: { profile: null }
  }
}
// 后续
this.user.profile = { name: 'Alice' }  // ❌ profile 曾为 null，此时赋值不会触发响应（Vue 2）

解决方式：

初始化时提供完整结构（哪怕空对象）：user: { profile: {} }
使用 $set 确保深层响应：this.$set(this.user, 'profile', { name: 'Alice' })
Vue 3 中推荐用 ref 或 reactive 显式包裹，避免隐式转换丢失响应性。

解构 props 会丢失响应性

常见错误写法：

export default {
  props: ['obj'],
  setup(props) {
    const { obj } = props  // ❌ 解构后 obj 是普通 JS 对象，不再响应
    return () => h('div', obj.field) // 修改 obj.field 不会更新
  }
}

原因：解构破坏了 proxy/ref 的响应式代理层。正确方式是：