fix(reactivity): track length on for in iteration on Array

fix #2427
vuejs · Oct 19, 2020 · 0e5a3c4 · 0e5a3c4
1 parent d9ad45a
commit 0e5a3c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -128,6 +128,21 @@ describe('reactivity/reactive/Array', () => {
     expect(fn).toHaveBeenCalledTimes(1)
   })
 
+  // #2427
+  test('track length on for ... in iteration', () => {
+    const array = reactive([1])
+    let length = ''
+    effect(() => {
+      length = ''
+      for (const key in array) {
+        length += key
+      }
+    })
+    expect(length).toBe('0')
+    array.push(1)
+    expect(length).toBe('01')
+  })
+
   describe('Array methods w/ refs', () => {
     let original: any[]
     beforeEach(() => {

diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
@@ -179,7 +179,7 @@ function has(target: object, key: string | symbol): boolean {
 }
 
 function ownKeys(target: object): (string | number | symbol)[] {
-  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
+  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
   return Reflect.ownKeys(target)
 }