Ref accessed via `Object.prototype.hasOwnProperty.call` isn't traced in `computed`
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
- create a ref
- in a
computed
, callObject.prototype.hasOwnProperty.call
- add a new property to the ref's value
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.
Is there anyway to tell the runtime tracer that ALL of the property, including NEW ones are used in computed
?
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:
Vite:
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
Thanks! Then I guess the rest of the problem is:
- Is this a bug, or it isn't fixable? Is this guranteed in vue's reactivity?
- 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.
object.hasOwnProperty
works normally because vue handles it internally
You can also solve this problem by setting a new object to dict.value
Thank you @chenfan0. Now I understand why this doesn't work. However, SHOULD this work? Is current behavior considered a bug?
- If it should work, we should fix this
- 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).