-
useTemplateRef
是 Vue 3.5 引入的组合式 API,旨在优化模板引用(Template Ref)的处理方式,提供类型安全、性能优化和更简洁的语法。 -
传统 ref
需要显式声明变量(如 const title = ref(null)),并在模板中绑定 ref="title",而
useTemplateRef
直接通过字符串标识符关联,代码更简洁。 -
useTemplateRef
在条件渲染(如 v-if)场景下,元素销毁时会自动将 h1.value 置为 null,无需手动清理,避免内存泄漏。
javascript
<template>
<h1 ref="title">
hello vue3.5
</h1>
</template>
<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue'
const h1 = useTemplateRef('title')
onMounted(() => {
console.log('==', h1.value)
})
</script>