根本原因是Vue响应式系统无法自动追踪对象新增顶层属性，需初始化声明或用$set/reactive确保响应性；props只读，应通过emit通知父组件更新。
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 的响应式代理层。正确方式是：
- 始终通过
props.obj访问（保留 proxy 引用） - 如需解构，用
toRefs（Vue 3）：const { obj } = toRefs(props)，它把每个 prop 转为 ref - Vue 2 中无直接等价方案，应避免解构 props 对象，改用计算属性或
this.$props.obj
响应式不是魔法，是机制约束下的确定行为。理解初始化时机、访问路径、代理边界，比背 API 更重要。不复杂但容易忽略。
