Vue2.7中reactive返回代理与原对象相等的原因及升级风险问询

差异原因 #

• Vue2.7的响应式基于Object.defineProperty实现：调用reactive时，会直接在原始对象raw本身上修改，给它的属性添加getter/setter来注入响应式逻辑，最终返回的就是原始对象，所以raw === proxy结果为true。
• Vue3的响应式基于ES6 Proxy实现：reactive会创建一个全新的代理对象，原始对象raw不会被任何修改，所有响应式拦截逻辑都在代理对象上运行，代理对象和原始对象是完全独立的引用，因此raw === proxy结果为false。

升级到Vue3的潜在风险 #

• 响应式触发失效：如果代码里习惯直接修改原始对象raw的属性来更新视图，在Vue3中这种操作不会触发响应式更新，必须修改代理对象proxy的属性才能生效。
• 相等判断逻辑出错：如果业务代码里有依赖reactive返回值与原始对象===判断的场景（比如条件分支、缓存校验、身份判断），升级后这些判断会得到相反结果，导致逻辑异常。
• 状态不一致问题：如果同时把原始对象和代理对象传入组件、存入状态管理库，会出现同一个数据有两个不同引用的情况，进而引发状态不同步的问题。

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