fix(reactivity): unexpected behaviors for array index out of valid array length when set and del

Author: hyf0

src/utils/utils.ts

@@ -60,9 +60,15 @@ export function isArray<T>(x: unknown): x is T[] {
   return Array.isArray(x)
 }
 
+const MAX_VALID_ARRAY_LENGTH = 4294967295 // Math.pow(2, 32) - 1
 export function isValidArrayIndex(val: any): boolean {
   const n = parseFloat(String(val))
-  return n >= 0 && Math.floor(n) === n && isFinite(val)
+  return (
+    n >= 0 &&
+    Math.floor(n) === n &&
+    isFinite(val) &&
+    n <= MAX_VALID_ARRAY_LENGTH
+  )
 }
 
 export function isObject(val: unknown): val is Record<any, any> {

test/v3/reactivity/del.spec.ts

@@ -1,4 +1,4 @@
-import { del, reactive, ref, watch } from '../../../src'
+import { del, reactive, ref, watch, set, watchEffect } from '../../../src'
 
 // Vue.delete workaround for triggering view updates on object property/array index deletion
 describe('reactivity/del', () => {
@@ -41,4 +41,21 @@ describe('reactivity/del', () => {
     expect(spy).toBeCalledTimes(1)
     expect(arr.value).toEqual([1, 3])
   })
+
+  it('should trigger reactivity when using del on array to delete index out of valid array length', () => {
+    const arr = ref<number[]>([])
+    const MAX_VALID_ARRAY_LENGTH = Math.pow(2, 32) - 1
+    const NON_VALIDD_INDEX = MAX_VALID_ARRAY_LENGTH + 1
+    set(arr.value, NON_VALIDD_INDEX, 0)
+    const spy = jest.fn()
+    watchEffect(
+      () => {
+        spy(arr.value)
+      },
+      { flush: 'sync' }
+    )
+    expect(spy).toBeCalledTimes(1)
+    del(arr.value, NON_VALIDD_INDEX)
+    expect(spy).toBeCalledTimes(2)
+  })
 })