fix(reactivity): handle non-array arguments in reactive `concat` method (#11794)

close #11792

diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 3d97660e4284f85d507d93d9d674b7bfee686cca..ebb4a926acd29caf2f58819c5df13be14e9ee6d3 100644 (file)
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -303,19 +303,35 @@ describe('reactivity/reactive/Array', () => {
       const a2 = reactive([{ val: 3 }])
       const a3 = [4, 5]
 
-      let result = computed(() => a1.concat(a2, a3))
-      expect(result.value).toStrictEqual([1, { val: 2 }, { val: 3 }, 4, 5])
+      let result = computed(() => a1.concat(a2, a3, 6, { val: 7 }))
+      expect(result.value).toStrictEqual([
+        1,
+        { val: 2 },
+        { val: 3 },
+        4,
+        5,
+        6,
+        { val: 7 },
+      ])
       expect(isReactive(result.value[1])).toBe(false)
       expect(isReactive(result.value[2])).toBe(true)
+      expect(isReactive(result.value[6])).toBe(false)
 
       a1.shift()
-      expect(result.value).toStrictEqual([{ val: 2 }, { val: 3 }, 4, 5])
+      expect(result.value).toStrictEqual([
+        { val: 2 },
+        { val: 3 },
+        4,
+        5,
+        6,
+        { val: 7 },
+      ])
 
       a2.pop()
-      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5])
+      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5, 6, { val: 7 }])
 
       a3.pop()
-      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5])
+      expect(result.value).toStrictEqual([{ val: 2 }, 4, 5, 6, { val: 7 }])
     })
 
     test('entries', () => {

diff --git a/packages/reactivity/src/arrayInstrumentations.ts b/packages/reactivity/src/arrayInstrumentations.ts
index 6a15e2a184a546b1aa7bb3cd8f0e98e3ff7538dc..e031df4fe10774e8e1c828d10484a47cb416ab10 100644 (file)
--- a/packages/reactivity/src/arrayInstrumentations.ts
+++ b/packages/reactivity/src/arrayInstrumentations.ts
@@ -2,6 +2,7 @@ import { TrackOpTypes } from './constants'
 import { endBatch, pauseTracking, resetTracking, startBatch } from './effect'
 import { isProxy, isShallow, toRaw, toReactive } from './reactive'
 import { ARRAY_ITERATE_KEY, track } from './dep'
+import { isArray } from '@vue/shared'
 
 /**
  * Track array iteration and return:
@@ -30,9 +31,9 @@ export const arrayInstrumentations: Record<string | symbol, Function> = <any>{
     return iterator(this, Symbol.iterator, toReactive)
   },
 
-  concat(...args: unknown[][]) {
+  concat(...args: unknown[]) {
     return reactiveReadArray(this).concat(
-      ...args.map(x => reactiveReadArray(x)),
+      ...args.map(x => (isArray(x) ? reactiveReadArray(x) : x)),
     )
   },