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

Jump to bottom

Symbol.toStringTag stops reactive() and ref() from being reactive. #10483

Open
WORMSS opened this issue Mar 8, 2024 · 2 comments · May be fixed by #12832
Open

Symbol.toStringTag stops reactive() and ref() from being reactive. #10483

WORMSS opened this issue Mar 8, 2024 · 2 comments · May be fixed by #12832
Labels
🔩 p2-edge-case scope: reactivity

Comments

@WORMSS
Copy link

WORMSS commented Mar 8, 2024

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqVVE1v2zAM/SuEMcAJYDhYt1PqGNuCwlgPTdHsNg+ro8iuU1ky9JElMPzfR0lxkm1Btp1sko981COlLvjYtvHW0GAaJIrIutWgqDYtsIJXszzQKg/SnNdNK6SGDohoWqPpOoJaPUqx20cgaUF0vaX2r4QeSikaCLFmmPOcE8GVhma/WG3mMIMu5wBfl/tmJVisxVLLmldfiurbFCDMRKHDKOf97ZBHMGWonzxRIuQ6US4nAv9N05EvPj4mOTv7f7LKkZXXeTLLM2QIo1ENTBtkGY3GMEvh+SDOiIxv4U13snqU8mBUv4SqeFswQy3g2TOUhuOxBQfB56wmr3Ms7Q5EYk2Rewah/YYIxqTf0dmAPhS+lJNM/MRxvmho2rSs0BQtgOTlJh10H42TCZrOvTJaI8kHYjlwPYbecEmcC+bJxGM8vpU0JVPoOrhfLh5iL2VdohQRcMNYBDdj6PtkYoGeWJ41UP4Dd3bkzv7kri5x40z/yj3M5YzfwrDYYeanxGRyJl0Q4ZXB5SjrKt4owfFeuTHkgV2RmlG5aO2c8FphazZiYwVj4se982lpKG6l95MXSl4v+DdqZ3158CiponJL8+AY04WsqPbhu+UD3eH/MdiItWGIvhJ8okowY3v0sE+Gr7HtM5zr9rN7Eex9Unc7TbkaDmUbtcje4fMAH4L5laOf2n0Xv3d5uJuo4vctlbYmCoiB+OZt0P8EqqmROA==

Steps to reproduce

Press the two buttons (C and G), observe nothing happens..
Observe that after being ran in reactive() or ref() the object has not become a proxy.

What is expected?

That the two objects have test property added and set to the value 'test' and that the UI shows the new state

What is actually happening?

The objects ARE IN FACT getting the properties added to them, but the UI doesn't trigger an update.

System Info

No response

Any additional comments?

A more complete Test Playground with other tests performed.
You will notice that C and G are identical to the cut down version of the test, but you are able to see that C and G do infact get the values updated to the screen if A,B,D,E,F, or H are pressed afterwards, due to THEIR reactivity kicking off the UI re-render..
But, even this little bit of hope will cease to exist when Vapor Mode starts to get used in the future.

You will notice that all others have isProxy set to true.

The only difference between A and C is Symbol.toStringTag has a value. this seems to boil down to the way getTargetType(), targetTypeMap(), toRawType() work internally.
@Doctor-wu
Copy link
Member

reactive will check the target type, if you use Symbol.toStringTag to rewrite the target type, it will be considered invalid in reactive, so I think it's not suggested to use Symbol.toStringTag in the target you want to reactive.
CleanShot 2024-03-09 at 20 23 51@2x

@WORMSS
Copy link
Author

WORMSS commented Mar 9, 2024

It's not my object. It came from a library.
And I doubt they were aware that using Symbol.toStringTag (correctly, might I add) would break another library, would start hacking around with the string instead of instanceof.
I can understand you wanted to use Object.prototype.toString to bypass the fact that someone might have overwritten toString(), but failed to handle that the fact that the basic toString isn't always the same output either.

@ddoemonn ddoemonn linked a pull request Feb 9, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🔩 p2-edge-case scope: reactivity
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(reactivity): handle objects with custom Symbol.toStringTag ddoemonn/core
3 participants
@WORMSS @haoqunjiang @Doctor-wu