vue 3 中 reactive 嵌套对象深层属性修改可触发更新，关键在于保持 proxy 链完整；直接赋值、object.assign 或展开运算符重建均有效，而替换整个嵌套对象或解构赋值会破坏响应式。
在 Vue 3 中，使用 reactive 创建的嵌套响应式对象，修改深层属性本身就能触发视图更新——前提是**你没有破坏响应式连接**。真正的问题不在于“能不能触发”，而在于“哪些写法会让它失效”。核心就一条：保持 Proxy 链完整，避免赋值覆盖掉被代理的对象。
✅ 正确修改深层属性（保持响应式）
只要用解构+展开、逐层赋值或 Object.assign 等方式创建新对象/新数组，并确保每一层都是从 reactive 源头“派生”出来的，响应式就持续有效：
-
更新嵌套对象字段：
state.user.profile.name = 'Alice'→ ✅ 直接赋值有效（profile是 reactive 的） -
替换某一层子对象（安全方式）：
Object.assign(state.user.profile, { name: 'Bob', age: 30 })→ ✅ 原对象不变，仅更新属性 -
用展开运算符重建目标层：
state.user.profile = { ...state.user.profile, city: 'Shanghai' }→ ✅ 新对象仍被 Proxy 包裹（Vue 3 自动递归代理）
❌ 常见破坏响应式的操作
这些写法会让目标属性“脱敏”，后续修改不再触发更新：
-
直接替换整个嵌套对象：
state.user.profile = { name: 'Charlie' }→ ❌ 新对象未经过reactive()，失去响应性 -
通过索引直接改数组项（旧版遗留风险）：
state.items[0] = { id: 1, done: true }→ ⚠️ Vue 3 大部分已支持，但若items是从非 reactive 源复制而来，仍可能失效 -
解构后修改（拿到的是普通值）：
const { name } = state.user.profile; name = 'David'→ ❌name是字符串副本，与响应式系统无关
? 深层嵌套更新的推荐写法
当结构多层（如 state.a.b.c.d.e = newValue），建议分步或封装工具函数，避免手误：
- 用
structuredClone+ 路径更新（适合一次性深度变更） - 封装
setByPath(state, 'a.b.c.d', newValue)，内部用proxy逐层访问并安全赋值 - 对数组中某对象的深层字段更新，优先用
map+ 展开：state.list = state.list.map(item => item.id === targetId ? { ...item, config: { ...item.config, timeout: 5000 } } : item)
? 触发更新的本质
Vue 的响应式依赖两个动作：track（读取时收集依赖） 和 trigger（修改时通知更新）。只要你访问的是 reactive 对象上的属性（哪怕很深），Vue 就能 track 到；只要你用合法方式修改该属性（非替换父级），就会 trigger。不需要手动调用 forceUpdate 或额外 API。
