fix(reactivity): avoid wrapping extended array methods (vuejs#11572)

close vuejs#11570

Author: edison1105

packages/reactivity/__tests__/reactiveArray.spec.ts

@@ -622,5 +622,22 @@ describe('reactivity/reactive/Array', () => {
       const firstItem = Array.from(deep.values())[0]
       expect(isReactive(firstItem)).toBe(true)
     })
+
+    test('extend methods', () => {
+      class Collection extends Array {
+        find(id: any) {
+          return super.find(obj => obj.id === id)
+        }
+      }
+
+      const state = reactive({
+        things: new Collection(),
+      })
+
+      const val = { id: 'foo', value: 'bar' }
+      state.things.push(val)
+
+      expect(state.things.find('foo')).toBe(val)
+    })
   })
 })

packages/reactivity/src/arrayInstrumentations.ts

@@ -227,6 +227,7 @@ function iterator(
 // higher than that
 type ArrayMethods = keyof Array<any> | 'findLast' | 'findLastIndex'
 
+const arrayProto = Array.prototype
 // instrument functions that read (potentially) all items
 // to take ARRAY_ITERATE dependency
 function apply(
@@ -237,6 +238,12 @@ function apply(
   wrappedRetFn?: (result: any) => unknown,
 ) {
   const arr = shallowReadArray(self)
+  let methodFn
+  // @ts-expect-error our code is limited to es2016 but user code is not
+  if ((methodFn = arr[method]) !== arrayProto[method]) {
+    return methodFn.apply(arr, arrayProto.slice.call(arguments, 2))
+  }
+
   let needsWrap = false
   let wrappedFn = fn
   if (arr !== self) {
@@ -251,8 +258,7 @@ function apply(
       }
     }
   }
-  // @ts-expect-error our code is limited to es2016 but user code is not
-  const result = arr[method](wrappedFn, thisArg)
+  const result = methodFn.call(arr, wrappedFn, thisArg)
   return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result
 }