diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts index 7f4a005d3d5..9a297e3a53d 100644 --- a/packages/reactivity/__tests__/effect.spec.ts +++ b/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 = () => {} diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts index bbac96a4b2a..c982dbd0b5a 100644 --- a/packages/reactivity/src/effect.ts +++ b/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) } })