toRaw() to cover all reactive objects ( ref, reactive,computed, etc)

[lidlanca]

Objective

toRaw() should return the encapsulated raw value for other reactive types (ref,computed,etc) without triggering reactivity or causing side effects.

Currently toRaw(value) only support reactive object, and return the value as is for anything else.

What does the proposed API look like?

toRaw(obj: Reactive|Ref|Computed|... )

for Ref

extending logic for ref should be as simple as

isRef(obj) {
 return obj._rawValue
}

for computed

there is an added complexity due to lazy evaluation and dirty state tracking,
there are few possible approaches :

• extract the cached value
• disable tracking before calling evaluation getter, and keep the computed object immutable to keep the action transparent.

for CustomRef ( feedback from: @jods4 )

• disable tracking before calling getter
• extend CustomRef to expose cache/rawValue via .peek() like method

[jods4]

It is an interesting idea -- and one that is present in older frameworks like ko.

It will be tricky for computed but also for customRef, which you didn't mention.

CustomRef

For customRef the framework has zero control over how the ref works internally.
The only way to grab the value is calling the getter.
If you don't want to track the read, the only way is to have Vue disable its tracking context for the duration of this call.
Alternatively, as a breaking change, the contract of Ref is expanded to include a peek function that customRef must provide.

Computed

If the cached value is not dirty, extracting it is fast and nice.

If it's dirty, I think returning an invalid cached value is a bad thing and will most likely lead to bugs.
The right thing to do is to update the cached value and return that without tracking the read.

Notice there are 2 different tracking scopes going on here:

1. Tracking the computed value read.
2. Tracking the computed own dependencies, which is a nested reactivity scope that is created when the computed updates its cached value.

and keep the computed object immutable to keep the action transparent.

IMHO the 2nd scope is unrelated to the 1st and I don't think the computed object should be immutable.
I see no good reason not to take this read as an opportunity to update and cache a dirty value. It's better for perfs as future reads will now have a cached value.

If you need to evaluate a computed bypassing its cache (so not tracking its own dependencies) it sounds like another new API to me. This is something KO didn't have, I'm curious if you have a use-case for that?

API ideas

If we look at Knockout for prior art, it offers a peek function that enables reading an observable (aka ref) or a computed observable (aka computed) without tracking the individual read, as discussed above.

Additionally, it provides an ignoreDependencies(callback) that calls callback with any ambient tracking disabled.
That is useful for when you want to execute a bunch of code (i.e. more than a single ref read), that possibly invokes opaque functions which may or may not touch reactive state, without tracking that code.
Typical use case would be in a computed or watchEffect.

computed(() => {
  // These are the dependencies (reads) that invalidate the computed
  let id = person.id;
  // The rest of the computation is not tracked, even if person is a reactive object with plenty of properties
  return ignoreDependencies(() => {
    return { name, age } = person;
  });
});

Alternatives

@vue/reactivity exports pauseTracking() and resetTracking() that enable exactly that, but I'm not sure if they're public or internal APIs; and you're responsible for always calling resetTracking exactly once, even when your code throws.

[lidlanca]

what I am aiming for toRaw to be a tool to introspect into an observable without introducing side effects in the reactivity system.

the immutability suggestion is perhaps an implementation detail, but the high level idea is that
introspecting the raw value will not interact with the reactivity system and return the value at the time of the call.

That is why my first suggested option was just to return the cached value for computed.

I know that computed has more factors to consider compared to the simple ref objects so the feedback is valuable