Vue 2.7与Vue 3中ref嵌套响应性差异问题咨询

核心结论 #

你遇到的现象是 Vue 2.7 与 Vue 3 响应式机制的明确变更，根源在于两者底层响应式实现逻辑的差异。

差异原因 #

Vue 2.7 的处理逻辑 #

Vue 2.7 沿用 Vue 2 的 Object.defineProperty 响应式系统：

• 当普通 JS 对象 x 被赋值给 ref(obj).value.pirate 时，Vue 会递归遍历 x 的所有属性，为其添加 getter/setter 拦截，将整个对象转为响应式。
• 无论通过 obj.value.pirate.age 还是直接 x.age 修改值，本质都是操作被添加了拦截的属性，因此都会触发依赖收集与界面更新。

Vue 3 的处理逻辑 #

Vue 3 使用 Proxy 实现响应式，逻辑更精细化：

• 当普通 JS 对象 x 被赋值给 ref(obj).value.pirate 时，Vue 会为 x 创建一个Proxy 代理对象，并让 obj.value.pirate 指向这个代理对象，但原始的 x 依然是无拦截的普通对象。
• 直接修改 x.age 时，操作的是未被代理的原始对象，Proxy 无法感知到这次变更，因此不会触发响应式更新；但由于 obj.value.pirate 和 x 指向同一内存地址，控制台查看 obj 的数值会变化，只是界面不更新。
• 通过 obj.value.pirate.age++ 修改时，操作的是 Proxy 代理对象，会被拦截并触发更新。

解决方案 #

针对 Vue 3 的场景，有三种可行处理方式：

1. 提前将原始对象转为响应式
   使用 reactive 包装 x，确保后续无论通过哪个引用修改，都是操作代理对象：

   import { ref, reactive } from 'vue'
   
   const x = reactive({ age: 10 })
   const obj = ref({ pirate: x })
   
   x.age++ // 正常触发Vue 3界面更新
   

2. 手动触发 ref 的依赖更新
   如果必须使用普通对象，修改原始对象后调用 triggerRef 强制通知响应式系统更新：

   import { ref, triggerRef } from 'vue'
   
   const x = { age: 10 }
   const obj = ref({ pirate: x })
   
   x.age++
   triggerRef(obj) // 强制触发obj的依赖更新，界面同步变化
   

3. 统一通过 ref 路径修改属性
   避免直接操作原始对象，始终通过 obj.value.pirate 的路径修改嵌套属性，确保操作被 Proxy 拦截。

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