注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～
2024 年 9 月 1 日发布的 组合式 API：辅助 | Vue.js，引入一个小小的新 API useTemplateRef()，它用于访问实际的 DOM 节点。
https://cn.vuejs.org/api/composition-api-helpers.html#usetemplateref
在 Vue 3.5 之前，访问 DOM 节点需要使用 ref() 函数。Vue 把这种访问 DOM 节点的机制叫做模板引用（Template Refs）。
使用 ref() 函数有两个限制。首先，HTML 标签的 ref 属性必须和 <script> 中的 ref 变量名同名。这虽然不算什么大问题，但是用起来有点儿奇怪。
<template>
<!-- ref 属性名为 myInput -->
<input ref="myInput" type="text" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 变量名也必须为 myInput，和 HTML ref 属性保持一致
const myInput = ref(null)
onMounted(() => {
myInput.value.focus()
})
</script>
其次，ref() 变量的类型推断不足。比如，我在 VS Code 中，把鼠标悬浮于 myInput.value 之上，看不到它对应 DOM 的实际类型。
当类型不明确时，VS Code 的智能补全提示就会比较混乱，基本不会返回需要的属性；
useTemplateRef() 是对模板引用机制的一次小优化。它是如何解决上述两个问题的？
首先，useTemplateRef() 的用法更像原生的 document.getElementById()。变量名可以随便起，只要保证函数参数名和 ref 属性名一致即可，这种语法更符合常理。
<template>
<input ref="myInput" type="text" />
</template>
<script setup>
import { useTemplateRef, onMounted } from 'vue'
// 变量名不必和 ref 属性保持一致，两者通过参数名进行关联
const inputRef = useTemplateRef('myInput')
onMounted(() => {
inputRef.value.focus()
})
</script>
// 官网示例：
<script setup>
import { useTemplateRef, onMounted } from 'vue'
// 变量名不必和 ref 属性保持一致，两者通过参数名进行关联
const inputRef = useTemplateRef('input')
onMounted(() => {
inputRef.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
其次，useTemplateRef() 的返回值类型会进行自动类型推断，智能提示更有保证。
建议在 Vue 3.5 及以上版本中优先使用 useTemplateRef() 函数，而 ref() 仅适用于 Vue 3.5 之前的版本