`toRef` and `computed` don't behave the same when used with a getter function

[ByScripts]

Vue version

3.5.20

Link to minimal reproduction

https://play.vuejs.org/#eNqNUs1OwzAMfhUrl3ZSVcbgNAESoB3gAAg45lJat8tokypxYWjqu+Ok6zYkmDi18ffjz4k34rpt048OxVxcuNyqlsAhde2V1KppjSXYgMUyATLP/vOZUb5clCXmlEBumrYjLKCH0poGIjaKpJY6N9oRNF+Pbyu49Pp4A6qYQ1QaE0E/8Rxuc6cJ7UdWx/EELq9gIzUMopSLHbL0h0zqPoHZdDoN+qGHKk6ZFsJtXQ4MUlUwdSTOmDgm/osr9cGAW5LXmxrT2lRxdLvMdMUTx6HlJEp8gsFhwvr/qsccg8Fsb3BxMrwC3z8fCJu2zgj5BPCCOLp53gEmEkGOoVJV6coZzY8Z7lIK30fVaB9bUiyVYj7csseyujaf96FGtsNkrOdLzN9/qa/c2tekeLLo+N1Qih1Gma2QBnjx8oBr/t+BjSk6znwMfEYeq/MZB9pNpwuOfcALae/CSipdvbrFmlC7cSgf1DP7wJeCF/H2yOj7uGfpedDxbon+G4GTAmI=

Steps to reproduce

1. Use this code

   import { ref, toRef, watchEffect, computed } from 'vue'
   
   const myObj = ref({ id: 'foo' })
   
   setInterval(() => {
     myObj.value = { id: 'foo' }
   }, 2000)
   
   const id1 = toRef(() => myObj.value.id)
   const id2 = computed(() => myObj.value.id)
   
   watchEffect(() => console.log('Changed (toRef)', id1.value))
   watchEffect(() => console.log('Changed (computed)', id2.value))

2. Check the console for logs

What is expected?

Both watchEffect to be executed once.

Using toRef with a getter should create a computed (or at least have the same behavior as computed)

What is actually happening?

watchEffect using the value created with toRef triggers every time the source object is updated, even if the the getter produces the same result.

Using computed with a getter creates a ComputedRef, which triggers reactivity only when its result change.

Using toRef with a getter creates a Readonly<Ref>>, which triggers reactivity even if its result doesn't change.

[edison1105]

Before 3.4, the callback of watchEffect will fire every time myObj.value is changed, even if the computed result remains the same. With the post-3.4 optimizations, the callback now only fires if the computed result has actually changed.

see https://blog.vuejs.org/posts/vue-3-4#more-efficient-reactivity-system

NOTE: If the current behavior of toRef is changed, it will be a breaking change.

[ByScripts]

Thank you for replying, but your answer doesn't seem related to the issue.

I know the reactivity behavior changed post-3.4, but it has nothing to do with the problem I'm describing here.

IMO, toRef(() => ...) and computed(() => ...) should have the same behavior, but it's not the case.

That means that when using function foo(arg: MaybeRefOrGetter<string>){}, then computed(() => toValue(arg)) and toRef(arg) will not behave the same.

Seems unexpected to me.

[absidue]

Considering that the current behaviour is documented and changing it would be a breaking change, it doesn't seem worth changing. You can easily achieve your desired behaviour in userland without any changes to Vue:

function modifiedToRef(value) {
  return typeof value === 'function' ? computed(value) : toRef(value)
}

[edison1105]

IMO, adding a new API is unnecessary; it would be better to just use computed directly.

[ByScripts]

@absidue Are you sure it would be a breaking change?

I don't see any difference with existing helpers, but maybe I'm forgetting some use cases.

[absidue]

Yes, it is documented that it calls the getter every time .value is accessed, you however are asking for Vue to add dependency tracking and only call it when it detects that one of the dependencies has changed.

[ByScripts]

Yes, but when the result of the computed is the same, it doesn't trigger the reactivity chain based on it.

Unlike toRef, which does trigger it.

[ByScripts]

In fact, you're right that this would involve a breaking change.

const a = computed(() => new Date())
const b = toRef(() => new Date())

Here, each time we call a.value, the date stays the same.

But each time we call b.value, the date change.

I don't know what to think about that. Because in the example I linked, the behavior seems unexpected.

For now I'll create a toComputed helper.

function toComputed<T>(value: MaybeRefOrGetter<T>): ComputedRef<T> {
  return computed(() => toValue(value))
}