Vue3类中ref变量自动解包：为何无需.value仍保响应式？

一、自动解包的原因 #

你碰到的这个自动解包，本质是Vue 3响应式系统对嵌套ref的处理逻辑：

• 当你把类实例存入ref对象时，ref会自动对对象类型的value调用reactive做包装，所以blocks.value其实是个reactive代理对象，不是原始的普通对象。
• 对于reactive代理对象里的ref类型属性，Vue会自动解包：不管是访问还是赋值，都不用手动加.value。你执行blocks.value['MCP01'].run = true时，响应式代理能识别出run是个ref，自动把赋值操作转发给run.value，效果和你手动写blocks.value['MCP01'].run.value = true完全一样。

二、响应式未被破坏的原因 #

你的类实例和内部的ref、computed能保持响应式，核心是Vue的响应式代理没破坏原实例的结构：

• reactive是基于原对象的代理包装，不会修改原始类实例本身，只是拦截了属性的访问和赋值操作。
• 类实例内部的ref和computed本身就是响应式依赖项，被reactive代理包裹后，依然会被Vue的依赖收集系统追踪。修改run的值时，依赖它的computed属性会自动重新计算，视图也会正常触发更新。
• 只要你没手动替换整个类实例（比如blocks.value['MCP01'] = new Emergency()这种操作，除非重新绑定响应式），原有实例的响应式链路就会一直保持完整。

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