useTemplateRef is more complex than the previous template reference in hooks

[maxfrees]

before

const hooks = ()=>{
  const elRef = ref<HTMLElement | null>(null);

  return {elRef}
}

new

const hooks = (key)=>{
  const elRef = useTemplateRef<HTMLInputElement>(key);

  return {elRef}
}

I now need to pass in this key from the outside to use it, which is a little more cumbersome than before

[ShGKme]

If by hook you mean composables - you still can pass a ref as an argument. Why do you need to create it inside a composable?

function useFooElement(element) {
  // do smth with element
  return { foo }
}

const element = useTemplateRef<HTMLElement>('someElement');

const { foo } = useFooElement()

instead of

function useFooElement() {
  const element = ref()
  // do smth with element
  return { element, foo }
}

const { foo, element } = useFooElement()

Then it's more flexible and you control connection with the element.

[maxfrees]

For example, destroy chart canvas..... Such operation
I was hoping

const hooks = ()=>{
const elRef = ref<HTMLElement | null>(null);

const distory = ()=>{
elRef.value.chart.distory()
}

return {elRef}
}

But it's not easy to do that in the case of useTemplateRef

[maxfrees]

I expect to generate template references and template referent-related events in hooks, such as destruction, access...

[ShGKme]

Your example doesn't explain why you need to create ref inside the composable. This works fine with template ref from composable argument

function useFoo(elRef: Ref<HTMLElement | null>) {
  const distory = () => {
    elRef.value.chart.distory()
  }
}

[maxfrees]

What I expect is that all the stuff related to template references will be handled in hooks

[ShGKme]

You need to connect with a node using ref attribute in HTML anyway.

In your solution you create and return a ref from a composable to assign it later. Instead, you can create and pass your ref to the composable. In both solutions you have the ref outside composable manually connected with the element.

// Proposed solution
const elRef = useTemplateRef('input')
const { foo } = useFoo(elRef)
// <input ref="input" />

// What you want
const { foo, elRef } = useFoo()
// <input ref="elRef" />

With the first option you have 1 more line of code, but better DX from IDE and explicitly created reference to an element. And this line has no additional logic. It doesn't depend on what's happening in the composable.

Is there a specific reason why it doesn't work for you? Is it only about not having this 1 line to define a reference?

[tsiotska]

In my opinion, it works as expected.

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

This template ref is maintained for compatibility, where the variable name corresponds to the element's ref attribute.

And the new one requires key to be explicitly passed.

const elRef = useTemplateRef<HTMLInputElement>(key);

I also don’t think that if a key isn’t provided, the variable name should be used instead.

[maxfrees]

I'm expecting to create a ref inside the hooks, but don't want the key to be passed in from the outside, what should I do now

[tsiotska]

const hooks = ()=>{
const elRef = useTemplateRef("KeyString");

return {elRef}
}

[maxfrees]

What if I bind it to the template

const hooks = ()=>{
const elRef = useTemplateRef("KeyString");

return {elRef}
}

template

import {elRef} from 'hooks'

<input ref='elRef '></input>

const focus = ()=>{
elRef.value.focus() 
}

Is that so?

[Justineo]

Here's an example demonstrating when useTemplateRef is particularly useful:

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';

const input1 = useTemplateRef('input1')
const input2 = ref()

input1.value
    // ^? (property) value: InputElement
input2.value
    // ^? (property) value: Ref<any, any>.value: any
</script>

<template>
  <input ref="input1" />
  <input ref="input2" />
</template>

I see two main benefits of using useTemplateRef:

• Automatic Typing Based on Static Analysis: useTemplateRef can infer the type directly from the template.

• Static String References: The ref becomes a static string, aligning better with Vue's template syntax, where all JavaScript expressions are wrapped with a v-* directive (ref used to be an exception).

Additionally, when you move the ref into a composable, it decouples the reference from the template, which prevents static type analysis of the reference.

[maxfrees]

Yes, this is useful, but if you are returning a template reference in hooks, then useTemplateRef is troublesome because you have to specify a key, and that key needs to be imported externally

[Justineo]

You can just use a regular ref if you want to decouple the ref and the template. useTemplateRef is designed for cases where they are coupled in the same component.

[maxfrees]

Thank you