peek function to get a ref value without depending on it

[t-oster]

Hi,
Coming from knockout.js I sometimes miss the function to use a ref/computed value inside another computed function without implicitly creating a dependency on that value.
Knockout provides a peek function, which does exactly that.
The use case is rather low level additions and libraries, but it exists (see the source of e.g vueuse/asyncComputed, they work around it by using promises).
Is there such feature, which is not documented or is it planned?

[jacekkarczmarczyk]

If I understand correctly vue-use has what you need:

https://vueuse.org/shared/computedWithControl/

[cnbebop]

He wants a method to retrieve ref's value without trigger side effect in watchEffect.

There is an example in @preact/signals-core :

import { signal, computed, effect } from "@preact/signals-core";

// signal just like ref in Vue
const count = signal(0);

// effect just like watchEffect in Vue
effect(() => {
  // use peek() method instead of value property
  console.log('The count is' + count.peek());
});

// just same as ref
count.value++;

// Output: 
// The count is 0

As shown in the above code, console.log executes only once.

[t-oster]

@cnbebop yes, this is what I am talking about, but indeed, computedWithControl achieves the desired effect.

[cnbebop]

@t-oster computedWithControl is more like useMemo in React. You need to pick dependencies manually instead of auto collection by reactive system.

[t-oster]

Yes, i know, but it is the closest I could find without modifying the vue source for ref and computed to expose the raw/cached value.
I did not try using a nested effect scope though...

[s3xysteak]

I am not sure what you means. If you do not want to trigger the reativity, just use the value of it.

import { ref, reative, watchEffect } from 'vue'

const one = ref(1)
const oneValue = one.value
watchEffect(() => {
  console.log(oneValue)
})

const two = reactive({ two: 2 })
const twoValue = two.two
watchEffect(() => {
  console.log(twoValue)
})

[t-oster]

Thank you for your answers. ComputedWithControl is a way to achieve exactly the desired effect. I have to explicitely list the dependencies, but that may be a good idea anyway.