Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(reactivity): unwrap ref types as props of arrays #1859

Merged
merged 5 commits into from
Aug 21, 2020
Merged

fix(reactivity): unwrap ref types as props of arrays #1859

merged 5 commits into from
Aug 21, 2020

Conversation

unbyte
Copy link
Contributor

@unbyte unbyte commented Aug 14, 2020

close #1846

@posva
Copy link
Member

posva commented Aug 14, 2020

I don't think this is fixing the the issue linked. It is about properties added to an array, not refs inside arrays and empty string keys

@unbyte
Copy link
Contributor Author

unbyte commented Aug 15, 2020

I don't think this is fixing the the issue linked. It is about properties added to an array, not refs inside arrays and empty string keys

!targetIsArray || isSymbol(key) || isNaN(key as any) || key === '' is it to judge whether the key is for an item or a property of the array. If it's a key for property, refs should be unwrapped.

@@ -81,7 +81,10 @@ function createGetter(isReadonly = false, shallow = false) {

if (isRef(res)) {
// ref unwrapping, only for Objects, not for Arrays.
return targetIsArray ? res : res.value
const shouldUnwrap =
!targetIsArray || isSymbol(key) || isNaN(key as any) || key === ''
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not just !targetIsArray || typeof key !== 'number'?

Copy link
Contributor Author

@unbyte unbyte Aug 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the key is a string😭

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact, there are a lot of edge cases not taken into account in this kind of check. eg. '3e7' can be treated as a legal Number by JavaScript.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3e7 is actually already normalized to "30000000" here, but this check does produce false positives for float strings like 1.234 which are not valid Array indices.

Technically we should only skip unwrap for integer keys. Maybe we can check '' + parseInt(key, 10) === key instead.

Copy link
Contributor Author

@unbyte unbyte Aug 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes! according to https://jsben.ch/MMQ6b, it has better accuracy and the time cost remains the same

isSymbol(key)
? builtInSymbols.has(key)
keyIsSymbol
? builtInSymbols.has(key as symbol)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reusing the result of isSymbol(key) will disable type guard, so have to add as manually 😣

@yyx990803 yyx990803 merged commit 3c05f8b into vuejs:master Aug 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Properties defined on an Array are not unwrapped in template
3 participants