fix(reactivity): assigning array.length while observing a symbol prop…

…erty (#7568)

packages/reactivity/__tests__/effect.spec.ts

@@ -243,6 +243,22 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(undefined)
   })
 
+  it('should support manipulating an array while observing symbol keyed properties', () => {
+    const key = Symbol()
+    let dummy
+    const array: any = reactive([1, 2, 3])
+    effect(() => (dummy = array[key]))
+
+    expect(dummy).toBe(undefined)
+    array.pop()
+    array.shift()
+    array.splice(0, 1)
+    expect(dummy).toBe(undefined)
+    array[key] = 'value'
+    array.length = 0
+    expect(dummy).toBe('value')
+  })
+
   it('should observe function valued properties', () => {
     const oldFunc = () => {}
     const newFunc = () => {}

packages/reactivity/src/effect.ts

@@ -1,5 +1,5 @@
 import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { extend, isArray, isIntegerKey, isMap } from '@vue/shared'
+import { extend, isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
 import { EffectScope, recordEffectScope } from './effectScope'
 import {
   createDep,
@@ -324,7 +324,7 @@ export function trigger(
   } else if (key === 'length' && isArray(target)) {
     const newLength = Number(newValue)
     depsMap.forEach((dep, key) => {
-      if (key === 'length' || key >= newLength) {
+      if (key === 'length' || (!isSymbol(key) && key >= newLength)) {
         deps.push(dep)
       }
     })