Vue version

3.2.45

Link to minimal reproduction

SFC Playground

Steps to reproduce

const value = {}
const valueRef = ref(value)
const valueShallowRef = shallowRef(value)

const valueArrReactive = reactive([value, valueRef, valueShallowRef])
const valueObjReactive = reactive({0: value, 1: valueRef, 2: valueShallowRef})

console.log('valueArrReactive[0]=', valueArrReactive[0], 'valueObjReactive[0]=', valueObjReactive[0])
console.log('valueArrReactive[1]=', valueArrReactive[1], 'valueObjReactive[1]=', valueObjReactive[1])
console.log('valueArrReactive[2]=', valueArrReactive[2], 'valueObjReactive[2]=', valueObjReactive[2])

What is expected?

I would expect reactive arrays and objects to behave the same when accessed.

What is actually happening?

They behave differently.

System Info

No response

Any additional comments?

No response

This is documented behavior.

https://vuejs.org/api/reactivity-core.html#reactive

I somehow missed that, my apologies!

By any chance, is it somehow possible to get the same unwrapping behavior for array elements as well? I imagine it might not be possible (at least not without writing your own proxy), but I guess it can't hurt to ask...

Also, does anybody know the rationale behind this particular behavior? On the surface, looking at the code: https://github.com/vuejs/core/blob/ce064a172b3b5bcb096b4984fe0c1a54177ac9c0/packages/reactivity/src/baseHandlers.ts#L142-L145 It seems like making arrays consistent with objects would only be a simplification. Of course, I understand that it is not possible to change this now, I am just curious what the original reasoning was.