When referencing components, can I use shadowRef instead of ref?

[godxiaoji]

From Document:
https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

It use ref reference component. But the typescript parsing is relatively complex. Parsing complex components will appear:

error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

Would it be better to use shallowRef instead of ref?

The same happens in the HTMLElement.

const elRef = ref<HTMLElement | null>(null)

The expected return type is:

const elRef: Ref<HTMLElement | null>

The actually return type is:

const elRef: Ref<{
    accessKey: string;
    readonly accessKeyLabel: string;
    autocapitalize: string;
    dir: string;
    draggable: boolean;
    hidden: boolean;
    inert: boolean;
    innerText: string;
    lang: string;
    readonly offsetHeight: number;
    ... 276 more ...;
    focus: (options?: FocusOptions | undefined) => void;
} | null>

This issue has been fixed at #3791 .

[edison1105]

Would it be better to use shallowRef instead of ref?

the shallowRef is better than ref for template refs.

[godxiaoji]

Are there any special consideration for using ref for template refs in documents?

[edison1105]

I am not sure. but I always use shallowRef in this scenario.

[Rolanddoda]

Anyone any update on this? Should we be using shallowRef or ref is fine because Vue internally optimizes for template refs?

[ferreira-tb]

I always use shallowRef for all objects, including elements. I only use ref when deep reactivity is a must.

[Rolanddoda]

Yeah shallowRef makes sense for template refs because why do we need to have deep tracking for this huge object? But docs showcase using ref for template refs so maybe they internally do some optimizations and thus, using ref for template refs might be fine

[godxiaoji]

As of when I raised this question, ref has not made any optimization for the template.

[Rolanddoda]

Do you mind sharing any actual sources/demos where shallowRef behaves better than ref when it comes to template and component template refs?

[Rolanddoda]

It seems that ref is optimized when using template refs. See Playground demo.

So if the demo is correct, it's perfectly fine to use ref for template and component template refs.

===== UPDATE ===========

I made another playground using component template refs, one with shallowRef the other with ref and they seem to behave in the same way: playground link

[Rolanddoda]

cc @godxiaoji

[godxiaoji]

I took a rough look at the source code, the template will be treated as an invalid type in the proxy of ref, so the final effect is similar to shadowRef. This also includes other types such as function.

[godxiaoji]

So I don't think this is a specialized optimization behavior. Other respondents also explained the reasons for using shallowRef from the perspective of scenario applications.

[ferreira-tb]

Yeah, they behave similar in this case. Vue doesn't make a proxy out of DOM elements. I always use shallowRef just because that's my default for all kind of objects. While it doesn't make much of a difference when working with elements, it does when using things like object literals or maps. So, for me, ref may be used to make things more explicit: "look, right here, for some reason we want to track this thing down to its core".

core/packages/reactivity/src/ref.ts

Line 155 in f66a75e

class RefImpl<T> {

core/packages/reactivity/src/reactive.ts

Line 242 in f66a75e

function createReactiveObject(

core/packages/reactivity/src/reactive.ts

Line 269 in f66a75e

const targetType = getTargetType(target)

core/packages/reactivity/src/reactive.ts

Line 37 in f66a75e

function targetTypeMap(rawType: string) {