当前位置：首页 > java >正文

Vue 3 ～ 3.5 版本useTemplateRef使用

java 2025/8/21 11:20:52

注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～

2024 年 9 月 1 日发布的组合式 API：辅助 | Vue.js，引入一个小小的新 API useTemplateRef()，它用于访问实际的 DOM 节点。

组合式 API：辅助 | Vue.jsVue.js - 渐进式的 JavaScript 框架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() 的返回值类型会进行自动类型推断，智能提示更有保证。