fix(reactivity): assigning array.length while observing a symbol property #7568
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Example 1: SFC Playground
Chrome:
Firefox:
Assigning the
length
of a reactive array will trigger this error if we are also observing a symbol-keyed property on the same array. The logic for assigning thelength
iterates through all observed properties, but doesn't take into account the possibility that a key could be a symbol.This can also be triggered by
pop()
,shift()
andsplice()
, which set thelength
internally.I originally encountered this problem in a question on Vue Land, where somebody was using the
stringify
function fromyaml
. That function checks for a special symbol as part of the conversion process. Just checking for the symbol is enough to add a dependency, it doesn't matter whether the property exists:Example 2: SFC Playground
The same examples using the deploy preview of this PR: