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.

Sign up for GitHub

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d498b66
Merge pull request #1 from vuejs/master
unbyte Aug 14, 2020
2d04337
fix(reactivity): unwrap ref types as props of arrays
unbyte Aug 14, 2020
6742186
fix(reactivity): check isSymbol before isNaN
unbyte Aug 15, 2020
5112eb7
fix(reactivity): cover edge cases of properties of array
unbyte Aug 20, 2020
709e0bd
Update baseHandlers.ts
yyx990803 Aug 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/reactivity/__tests__/ref.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,19 @@ describe('reactivity/ref', () => {
expect((arr[1] as Ref).value).toBe(3)
})

it('should unwrap ref types as props of arrays', () => {
const arr = [ref(0)]
const symbolKey = Symbol('')
arr['' as any] = ref(1)
arr[symbolKey as any] = ref(2)
const arrRef = ref(arr).value
expect(isRef(arrRef[0])).toBe(true)
expect(isRef(arrRef['' as any])).toBe(false)
expect(isRef(arrRef[symbolKey as any])).toBe(false)
expect(arrRef['' as any]).toBe(1)
expect(arrRef[symbolKey as any]).toBe(2)
})

it('should keep tuple types', () => {
const tuple: [number, string, { a: number }, () => number, Ref<number>] = [
0,
Expand Down
5 changes: 4 additions & 1 deletion packages/reactivity/src/baseHandlers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 •
edited
Loading

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 •
edited
Loading

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


return shouldUnwrap ? res.value : res
}

if (isObject(res)) {
Expand Down