Possibility to untrack ref in watchEffect

[KingSora]

Vue offers two ways of effect tracking: watchEffect and watch.
When watch is being used one can be explicit about all refs which should be tracked, vs in watchEffect just all refs which are used inside are tracked automatically, but there is no way of excluding refs of being tracked.

Implementation:

I would imagine a function with the same signature as unref just with the difference that the value isn't tracked as well:

import { watchEffect, unref, untrack } from 'vue';

const a = ref(0);
const b = ref(1);

watchEffect(() => {
  console.log(unref(a)); // tracks variable "a" and returns its value of `0`.
  console.log(untrack(b)); // doesn't track variable "b" and returns its value of `1`.
});

In the example above the watchEffect would only run if ref a changes but not when ref b changes.

Benefits

• DX benefits in terms of deciding how and when to use watch vs watchEffect
• Library authors are able to export functions where the functions themselfs decide which refs are tracked and which arent so the execution context (watch, watchEffect) doesn't matter to them

Other references

Libraries like solid, svelte and angular offer the same functionality:

• https://www.solidjs.com/docs/latest/api#untrack
• https://svelte.dev/docs/svelte/svelte#untrack
• https://angular.dev/api/core/untracked
• In qwik its done the other way around with a function called track() https://qwik.dev/docs/components/tasks/#track

[jods4]

but there is no way of excluding refs of being tracked.

That is not exactly true. @vue/reactivty exposes some advanced functions that enable this.
Call pauseTracking() to stop tracking any code you run afterwards (incl. calling opaque functions, reactive objects, computeds, etc.), and don't forget to call restoreTracking() when you're done.
You could use this to create untrack(ref) if you wanted.

That said my own experience with other reactive libraries is that having a ref.peek() or peek(ref) function to read a value without calling track() is useful in some edge cases, so I wouldn't mind seeing this in core :)

[KingSora]

@jods4 Thanks for taking time reading my proposal :)

Regarding @vue/reactivty: I wasn't able to find any docs regarding this package so I didn't take it into account.. Even if one could build the untrack function, the goal is to not do that and instead have built-in way of doing that.

That being said, I'm not strictly for a function called untrack. Your proposal with ref.peek is also perfectly valid and enables everything the untrack function would also enable if refs are used. A untrack function could also work for reactive objects created by reactive().

[teleskop150750]

ref.peek() does not cover all cases

for example, I want to protect myself in that if the user passed a reactive variable, it will not get into the dependency

function useTimeout(options: { timeout: () => number }) {
    const open = shallowRef(false)
    watchEffect(() => {
        setTimeout(() => (open.value = true), untrack(options.timeout))
    })
}

[jods4]

@teleskop150750 pauseTracking / resetTracking is a global "disable reactivity tracking" switch.

Your untrack example would not work.
timeout() is declared as () => number.
In JS, options.timeout() will be evaluated first (and tracked by Vue), then the resulting number is passed to untrack(), to no effect...

[teleskop150750]

@jods4 Thank you, I fixed it

[jods4]

Then you can use

function untrack(x) {
  try {
    pauseTracking()
    return toValue(x)
  }
  finally {
    resetTracking()
  }
}