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

Ref accessed via Object.prototype.hasOwnProperty.call isn't traced in computed #9177

Open
leoleoasd opened this issue Sep 9, 2023 · 7 comments

Comments

@leoleoasd
Copy link

leoleoasd commented Sep 9, 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9VNtu4jAQ/ZVRXpJsUYD2jYZqL6q0u9pdqm3fcFWFxICpsS1fKBXKv+/YIRC2tDyQeObM8ZnjcXbRF6WyjaPRKMpNqZmyYKh1CnghFmMSWUOiGyLYWkltYQeazntQyrVyllZQw1zLNcRIEBNBRCmFsVCx0sLYQ5MdEQDxMB5dElGn1y2iJfj+8PsXIttlkqQwvoFQ5EmyTcEdxSoATi0SetrpYwjMpU58kGFocI2PHIaDAb5dXABLAwUAm0Myma0oUiktrbSvimbLwkxexJ2Wimr7mpUF58lxtx6wzMp7q5lYJGmaNmr8D7fPlDPLDnjaxT4C7gyfvAzfqS+p/SP8YbHTInCsJBNJ3IvTE0tQX9DzVEonWvsuj/miqp5aDGY7Tu0bLIxhC3HSyV769JS7yXaFj2AYhDayz6HhYgxDzNbHI1zigNB3JHUcwsNHY/bVQETeb8YMhwoXlq4VLyzFFUBesU14AdjtPEUdrMPETB/i3dF5m89nzlop4HPJWfmM89u1DScZl4f+8n4Dfq/0vw6xuomcJ8j7jfq8f+gp6uH1QbfmbJGtjBR4x4I7SI1NME71RFmGbpJo1J4VKuZcvvwMMavxFNt4uaTl85n4ymx9jER3mhqqN5REh5wt9ILaJn17/4du8f2QXMvKcUR/kPxLjeTOa2xgX52oUHYHF9T+CF8HnKUHc7u1VJi2KS80TFbAkwi/E98+aP0o9yq72l+dOqr/AW3XiqU=

Steps to reproduce

  1. create a ref
  2. in a computed, call Object.prototype.hasOwnProperty.call
  3. add a new property to the ref's value
  4. computed isn't updated.

What is expected?

add_property also updates the computed

What is actually happening?

only change_property does

System Info

No response

Any additional comments?

The "create issue" button in https://new-issue.vuejs.org/ isn't working; github is asking me to filling the issue template AGAIN.

@leoleoasd leoleoasd changed the title Ref accessed via Object.prototype.hasOwnProperty.call isn't traced in computed Ref accessed via Object.prototype.hasOwnProperty.call isn't traced in computed Sep 9, 2023
@leoleoasd
Copy link
Author

Is there anyway to tell the runtime tracer that ALL of the property, including NEW ones are used in computed?

@leoleoasd
Copy link
Author

I don't know why, but adding console.log(dict.value); helps in vue sfc playground, but doesn't work with vite development server (just create a fresh new vite project and paste the exact code there).
SFC Playground:
image

Vite:
image

@chenfan0
Copy link
Contributor

before

if (Object.prototype.hasOwnProperty.call(dict.value, i.toString())) {
      ret.push(dict.value[i.toString()] + i * 100);
}

after

 if (dict.value.hasOwnProperty(i.toString())) {
      ret.push(dict.value[i.toString()] + i * 100);
 }

You can directly use dict.value.hasOwnProperty to solve this problem

@leoleoasd
Copy link
Author

Thanks!
Then I guess the rest of the problem is:

  1. Is this a bug, or it isn't fixable? Is this guranteed in vue's reactivity?
  2. If this isn't a bug, should this be documented in somewhere like here? Will other Object.prototype.xxxxx work? I vaguely remembered that vue can't track dynamically added properties (back in vue2) and I googled for this behavior for hours and got nothing.

@chenfan0
Copy link
Contributor

object.hasOwnProperty works normally because vue handles it internally
image

image

You can also solve this problem by setting a new object to dict.value

image

@chenfan0
Copy link
Contributor

You can see this PR for some detailed information。#2621

@leoleoasd
Copy link
Author

leoleoasd commented Sep 26, 2023

Thank you @chenfan0. Now I understand why this doesn't work.
However, SHOULD this work? Is current behavior considered a bug?

  1. If it should work, we should fix this
  2. If it shouldn't work (i.e. a 'feature' rather than a 'bug'), we should clarify this in the documentation (like in the FAQ section of reactivity page).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants