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>
相关推荐
孙克旭_5 小时前
Docker 镜像构建|Vue+SpringBoot+Go 多语言项目 Dockerfile 案例
linux·运维·vue.js·spring boot·docker·dockerfile
雪芽蓝域zzs6 小时前
(六)打包优化 + Nginx 部署完整配置 + 项目收尾
前端·vue.js
研☆香6 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
宿6748 小时前
vue3-pinia
前端·vue.js
日光倾8 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
Buke..11 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
小白勇闯网安圈11 小时前
Vue 进阶实战:事件修饰符、表单控制、购物车与 Ajax 请求
前端·vue.js·ajax
前端炒粉13 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆102413 小时前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去13 小时前
ant的a-table更改表格的高度
前端·javascript·html