useTemplateRef Vue3.5

  • 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>
相关推荐
林希_Rachel_傻希希2 小时前
《DOM元素获取全攻略:为什么 querySelectorAll() 拿不到新元素?一文讲透动态与静态集合》
前端·javascript
PHP武器库2 小时前
从零到一:用 Vue 打造一个零依赖、插件化的 JS 库
前端·javascript·vue.js
excel3 小时前
深入理解 Slot(插槽)
前端·javascript·vue.js
工业互联网专业4 小时前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
Red Car5 小时前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码5 小时前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
千叶寻-6 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
記億揺晃着的那天13 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing14 小时前
ByteDance——jy真题
前端·javascript·面试