Vue3中为何为两个ref赋值同一对象会共享响应性？

这是完全正常的现象，核心原因是JavaScript的引用类型特性结合Vue响应式系统的工作机制导致的，具体拆解如下：

1. JavaScript引用类型的本质 #

testObj是一个普通对象，属于引用类型。在JavaScript中，引用类型的变量存储的不是对象本身的内容，而是指向内存中该对象的引用地址。

当你执行ref1.value = testObj和ref2.value = testObj时，相当于让ref1和ref2的内部值都指向了内存中同一个对象的引用。不管通过哪个ref去访问这个对象，本质上操作的都是内存里的同一个实体。

2. Vue中ref对对象的处理逻辑 #

当你给ref赋值一个对象时，Vue会自动用reactive函数对这个对象进行响应式代理包装，但这个包装是针对对象本身的，而不是ref的value引用。

也就是说，ref1.value和ref2.value指向的是同一个被代理后的响应式对象。所以修改ref1.test时，本质是在修改这个共享的响应式对象的属性，ref2.test自然会同步显示变化——因为它们从始至终都是同一个对象。

打个简单的比方：这就像给两个人各发了一把能开同一扇门的钥匙，不管用哪把钥匙开门，门的状态都是同一个，两个人看到的门状态肯定是一样的。

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