[@vue/reactivity] Map and Set lookups behave differently after being proxied

[nmsmith]

Version

3.0.0-alpha.7

Reproduction link

https://jsfiddle.net/k571vhbu/1/

Steps to reproduce

Insert some reactive() values into a non-reactive Set or Map. Wrap the Set or Map in reactive(). The inserted values will no longer match as keys, making get(), has(), and delete() return undefined & false.

What is expected?

After being wrapped in a reactive() proxy, the observable behaviour of a Set or Map remains unchanged.

What is actually happening?

Wrapped Sets and Maps behave differently, as described.

---

This behavioural bug is a result of the proxy code in @vue/reactivity unwrapping proxied keys before passing them to the underlying Map and Set methods, even if the keys already present are proxied (because they were inserted into the raw Map/Set).

[LinusBorg]

Related code:

https://github.com/vuejs/vue-next/blob/fb4856b36375fcf3eecaf89f260b272052a0b432/packages/reactivity/src/collectionHandlers.ts#L75-L87

The cause of this bug is that we assume that the raw Map / Set contains no proxies, and instead only contains raww values.

So we probably have to check for both the original raw value as well as the reactive proxy, and likely do this in more places than the function linked above.

One caveat that this would have to cover / work around it that we could have both the original and proxy object in the Set/Map:

const value =  x: 0}
const wrappedValue = VueReactivity.reactive({value);

const set = new Set();
set.add(value)
set.add(wrappedValue) // should this warn that the original is already in the set or something?

const wrappedSet = VueReactivity.reactive(set);

wrappedSet.delete(wrappedValue) // which of the two should this delete?