Inconsistent elements in an reactive array prop

[tkalmar]

Vue version

3.5.11

Link to minimal reproduction

https://play.vuejs.org/#eNqNU8tu2zAQ/BWGl0iAI/V1UmUDbpFDe0gCt7cwB1VaO3QpkiApxYWhf++SkhwliIXc9jGcGXKXR7rWOmkboBnNbWm4dsSCa/SKSV5rZRz5rmpNtkbV5DJJfeLhl19P/SMxUJSOt0C6ATcAmCyVtI5UhSvIktwf20Jk5GO3IH30qXtgMk97WRTExEGtReEAM0LyIJ2BgBqkWzLqie4/PDBKMvVnb4eKT0cLV0N9zCMPiBGRImOeTujpgjqL/rZ8l+ytkvgARy/KaImqXIC51Y6jf0YzEjq+Vwihnn6GmjMNLMZ6+Qjl3zfqe3vwNUbvDFgwLTB66rnC7MD17etfN3DA+NSsVdUIRM80N2CVaLzHHvatkRXanuCC2x9hTFzuftvrgwNpx0t5ox7ZBTyjODX/4Oeu/mz3c/IlnGOyw1ccV+KNDZrsiH/UxkF1bke0UdriklSw5RLufBYFaT/QjKyNKf4Fn+Nkb1/Vhy3JCDagdOgtHrlRG4tIPpqIoni56iUTz59suXBgokj5+sWFimO0djq8OX966mbCQiY0cwte8TYEfUjaK/uonnB9o95ywmUpmgps1KsNd4xxoVc3Sm4G8Tyd4/Hu54jewfLiljNUfmxkXZZg7TPbGL38fd1/M7KEDg==

Steps to reproduce

If i filter or map an Array Prop which is reactive i get proxied instances not the raw results. I assume that the iterator from the reactive instance is used here so that the elements in the array get proxied.

What is expected?

Consistent behaviour of the prop. Either when accessing the prop get also proxies or get raw elements when mapping/filtering (iterating) the prop.

What is actually happening?

The prop "gives" raw objects when accessed directly but proxies if iterated.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 115.17 GB / 125.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chromium: 129.0.6668.58

Any additional comments?

Hit this behaviour when looking up elements in an filtered prop.

[tkalmar]

So espeacially fooProp[0] !== fooProp.filter(Boolean)[0] hit me very unexpected

[edison1105]

This is the expected behavior. use toRaw to get the raw value

const data = [{val: 1}, {val: 2}]
const reactiveObjs = reactive(data) // data becomes a Proxy, but the elements inside are not
reactiveObjs.filter(Boolean) // the elements become Proxies

So espeacially fooProp[0] !== fooProp.filter(Boolean)[0] hit me very unexpected

I got different results. see Playground