fix(reactivity): unwrap non-index accessed refs on reactive arrays (#…

…1859)

close #1846

packages/reactivity/__tests__/ref.spec.ts

@@ -115,6 +115,19 @@ describe('reactivity/ref', () => {
     expect((arr[1] as Ref).value).toBe(3)
   })
 
+  it('should unwrap ref types as props of arrays', () => {
+    const arr = [ref(0)]
+    const symbolKey = Symbol('')
+    arr['' as any] = ref(1)
+    arr[symbolKey as any] = ref(2)
+    const arrRef = ref(arr).value
+    expect(isRef(arrRef[0])).toBe(true)
+    expect(isRef(arrRef['' as any])).toBe(false)
+    expect(isRef(arrRef[symbolKey as any])).toBe(false)
+    expect(arrRef['' as any]).toBe(1)
+    expect(arrRef[symbolKey as any]).toBe(2)
+  })
+
   it('should keep tuple types', () => {
     const tuple: [number, string, { a: number }, () => number, Ref<number>] = [
       0,

packages/reactivity/src/baseHandlers.ts

@@ -63,9 +63,10 @@ function createGetter(isReadonly = false, shallow = false) {
 
     const res = Reflect.get(target, key, receiver)
 
+    const keyIsSymbol = isSymbol(key)
     if (
-      isSymbol(key)
-        ? builtInSymbols.has(key)
+      keyIsSymbol
+        ? builtInSymbols.has(key as symbol)
         : key === `__proto__` || key === `__v_isRef`
     ) {
       return res
@@ -80,8 +81,12 @@ function createGetter(isReadonly = false, shallow = false) {
     }
 
     if (isRef(res)) {
-      // ref unwrapping, only for Objects, not for Arrays.
-      return targetIsArray ? res : res.value
+      // ref unwrapping - does not apply for Array + integer key.
+      const shouldUnwrap =
+        !targetIsArray ||
+        keyIsSymbol ||
+        '' + parseInt(key as string, 10) !== key
+      return shouldUnwrap ? res.value : res
     }
 
     if (isObject(res)) {