fix(reactivity): extended methods respect reactive (#11629)

close #11628

diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 960c16e0b3bf1a3fb19f7792f746852baecf6906..fabafc21e2523fcb5e6301639772f8d669ca1f15 100644 (file)
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -709,9 +709,17 @@ describe('reactivity/reactive/Array', () => {
 
       expect(state.things.every('foo', 'bar', 'baz')).toBe(false)
       expect(state.things.filter('foo', 'bar', 'baz')).toEqual([foo])
-      expect(state.things.find('foo', 'bar', 'baz')).toBe(foo)
+
+      const _foo = state.things.find('foo', 'bar', 'baz')
+      expect(isReactive(_foo)).toBe(true)
+      expect(foo).toStrictEqual(_foo)
+
       expect(state.things.findIndex('foo', 'bar', 'baz')).toBe(1)
-      expect(state.things.findLast('foo', 'bar', 'baz')).toBe(bar)
+
+      const _bar = state.things.findLast('foo', 'bar', 'baz')
+      expect(isReactive(_bar)).toBe(true)
+      expect(bar).toStrictEqual(_bar)
+
       expect(state.things.findLastIndex('foo', 'bar', 'baz')).toBe(1)
       expect(state.things.forEach('foo', 'bar', 'baz')).toBeUndefined()
       expect(state.things.map('foo', 'bar', 'baz')).toEqual(['1', '2', '3'])

diff --git a/packages/reactivity/src/arrayInstrumentations.ts b/packages/reactivity/src/arrayInstrumentations.ts
index 58c31835dfd9c88f3cfcd0220ee9090a4cfd6643..6cf7602eca5900b13a1d00aaa4d152d2bcd68dd1 100644 (file)
--- a/packages/reactivity/src/arrayInstrumentations.ts
+++ b/packages/reactivity/src/arrayInstrumentations.ts
@@ -239,16 +239,17 @@ function apply(
   args?: IArguments,
 ) {
   const arr = shallowReadArray(self)
-  let methodFn
+  const needsWrap = arr !== self && !isShallow(self)
   // @ts-expect-error our code is limited to es2016 but user code is not
-  if ((methodFn = arr[method]) !== arrayProto[method]) {
-    return methodFn.apply(arr, args)
+  const methodFn = arr[method]
+  // @ts-expect-error
+  if (methodFn !== arrayProto[method]) {
+    const result = methodFn.apply(arr, args)
+    return needsWrap ? toReactive(result) : result
   }
 
-  let needsWrap = false
   let wrappedFn = fn
   if (arr !== self) {
-    needsWrap = !isShallow(self)
     if (needsWrap) {
       wrappedFn = function (this: unknown, item, index) {
         return fn.call(this, toReactive(item), index, self)