Vue3中Proxy对象控制台日志重复显示问题咨询

这个现象确实和Vue3的Proxy响应式机制有关，属于控制台的正常显示特性，并非代码逻辑异常。

原因分析 #

• Vue3中，ref包裹的对象会被转换成Proxy对象，以此实现响应式状态追踪。
• 浏览器控制台打印Proxy对象时，不会立即生成对象的快照，而是在你点击展开日志的那一刻，才读取该Proxy的当前实时状态。
• 你的循环实际执行了3次（对应priceElementsQuantity.value = 3），每次循环都会向priceTestWrapData.value中新增键值对。当你后续展开第一次循环打印的日志时，这个Proxy对象已经被后两次循环修改为包含3个键值对的状态，因此看起来每条日志里都有3个键值对，但这只是控制台的实时显示效果，并非每次循环都重复执行了三次操作。

验证方法 #

如果想查看每次打印时对象的真实状态，可以将Proxy转换为普通对象后再打印：

console.log(JSON.parse(JSON.stringify(priceTestWrapData.value)))

这样打印的是当前状态的快照，能清晰看到每次循环后对象的变化过程。

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