Improve description of "disconnected" property caveat to reactive obj…

[sgpinkus]

…ects.

Try and make more clear what happens when you create a new reference to a reactive object property. Just saying "disconnected" is ambiguous and confusing because as stated else where in the docs, reactivity is "deep", so the property your referencing is actually still a proxy object. It's just "disconnected" from the parent to subscribers to the parent will not get notified. At least that is my understanding of what is going on (it's strange because it seems like have a parent reference would be a simple fix to this issue, but that has not been done for some unexplained reason).

Description of Problem

Proposed Solution

Additional Information

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	d8e61ce
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/6486964e93a715000892f206
😎 Deploy Preview	https://deploy-preview-2202--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[skirtles-code]

Thanks for the PR!

We can certainly try to improve the wording of that paragraph. I'm not sure whether the wording you've proposed quiet works though. Feedback below.

[skirtles-code]

I'm not sure about this wording. I think it implies that the value of the property is also an object. The value could be anything. The phrase 'parent object' makes sense if there is also a child object, but I'm not so sure whether it works for values more generally.

[sgpinkus]

Thanks for the feedback

The phrase 'parent object' makes sense if there is also a child object, but I'm not so sure whether it works for values more generally.

I can't see it. I think the phrase makes sense if there is a parent object, regardless.

I'd agree, the gotcha here for me is all about when the child is an object or array (a reference type). In my thinking if you destructure or assign a primitive value it seems obvious that the new variable will not be reactive - how can it be. But the case of a ref type (array or object) is much more confusing because the thing is still a Proxy object, it's just disconnected.

[sgpinkus]

Just did a bit of testing and I'm confused about what the original document meant by:

"When you assign or destructure a reactive object's property to a local variable, the reactivity is "disconnected" because access to the local variable no longer triggers the get / set proxy traps."

import { reactive, toRaw, watch } from 'vue'
const x: any = {
  a: [],
  b: 2,
  c: { q: 0 }
}
console.log('Starting');
const y: any = reactive(x);
watch(y, (newVal: any, oldVal: any) => {
  console.log('Something reactive happened', toRaw(newVal), toRaw(oldVal));
});
const { a } = y;
a[0] = 123;

The watcher is triggered. Doesn't that imply "a" the local variable is not "disconnected" after all?

In any case, agree the statement needs clarifying but this PR is probably not good for that.

[skirtles-code]

The watcher is triggered. Doesn't that imply "a" the local variable is not "disconnected" after all?

It is disconnected in the sense that if you use a inside a reactive effect (e.g. rendering, a watcher or a computed property) it won't be connected to y.a. If y.a is assigned a new value that won't be reflected in y.

In my thinking if you destructure or assign a primitive value it seems obvious that the new variable will not be reactive - how can it be.

I think this is ultimately the cause of the confusion. To you this seems obvious, but to many people it isn't obvious and needs stating explicitly. For someone new to Vue it isn't necessarily obvious quite how reactivity and setup fit together, especially if they're expecting it to work the same as other frameworks (e.g. like React hooks). This is what that line in the docs is trying to communicate. The difficulty here is that it is trying to address a common misunderstanding, but if you never had that misunderstanding it isn't necessarily clear what problem that sentence is even trying to address.

[sgpinkus]

It is disconnected in the sense that if you use a inside a reactive effect (e.g. rendering, a watcher or a computed property) it won't be connected to y.a. If y.a is assigned a new value that won't be reflected in y.

I'm confused. I think you saying the reference to a MAY become disconnected if I reassign y.a a new value?

To you this seems obvious, but to many people it isn't obvious and needs stating explicitly ...

True. Happy to state explicitly about primitives. Nothing to me is very obvious about reactive in Vue :).