共读vue3源码issues1第一周

issues1：readonly() breaks comparison between objects #498

1.出现问题版本：

vue3.2.21

2.原因：

以下是出问题的代码：

以上代码打印结果是：

Before: true

After: false

这是为什么呢？通过反复赋值，就不相等了?

解决步骤

通过断点调试发现赋值的时候改变了类型：

为什么会导致这个结果？

因为在19行赋值的时候会触发 set 逻辑，而在 set 里面会有一个调用 toRaw 函数的动作，所以这里就会把 .a 转换成普通的值对象了（从 readonly 转成普通对象）

接着到这里的对比逻辑，这里对比的时候会首先触发 get，而触发 get 的时候又会触发检测 value 是不是对象，如果是对象的话，就会继续转换，这里的转换取决于调用这个key的对象是什么类型，我们调用的是 moreComplex.a 的 key 是 a，对象是 moreComplex，而 moreComplex 是 reactive 对象，所以 .a 自然就被转成 reactive 对象了。

最终判断的两者不相等只是类型不同，但是值仍然是相等的。

分析问题的话，是因为 .a 变成了普通的 value 所以才会被转换成 reactive，所以我们只需要在 set 的时候，检测如果是 readonly 对象的话 那么就别再调用 toRaw 了，那 .a 自然就变不成普通的 value。