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

close #11792

Author: jh-leong

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', () => {

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)),
     )
   },