Add toShallowRef function

[Alfred-Skyblue]

add toShallowRef equivalent to toRef(). This would be useful should one want to obtain a ref to a third-party object, without worrying about ref() unwrapping.

PR

expected:

import { toShallowRef } from 'vue'
const msg = ref('Hello World')
const a = toShallowRef(0) // ShallowRef<number>
const b = toShallowRef(msg) // Ref<string>
const c = toShallowRef(() => 'hi') // DeepReadonly<Ref<string>>

[RomainLanz]

Hey there! 👋🏻

I believe we should also add toShallowRefs.

[Alfred-Skyblue]

@RomainLanz The purpose of toRefs and toRef(reactive(obj), key) is to enhance the structure and maintain reactivity when accessing values within a reactive object. These functions require a reactive object as their input. In the case of toShallowRef, when we apply it to a reactive object, the resulting ShallowRef object still triggers the effects of the underlying reactive object upon deep updates. Therefore, I believe there is no need to add toShallowRefs.

[undergroundwires]

We should have this.

But as I see the implementation in vuejs/core#8530 lacks an answer for toRef(obj, key).

An intuitive API for making refs out of props, i.e toShallowRef(props, 'propName'). This API is more explicit and tells me that only value modifications will trigger an update, but using toRef name may suggest that it's intended to create deep reactive references just like refs (even though it does not do it this way). ShallowRef communicates this much better.

So it should allow parameters of toRef.

[Alfred-Skyblue]

It is important to note that toRef(object, key) must take a reactive object to ensure that the obtained Ref is reactive. If we use toShallowRef on a reactive variable, it would be meaningless.