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>
相关推荐
华仔啊10 分钟前
还在用 WebSocket 做实时通信?SSE 可能更简单
前端·javascript
_AaronWong36 分钟前
基于 Vue 3 的屏幕音频捕获实现:从原理到实践
前端·vue.js·音视频开发
木易士心1 小时前
深入剖析:按下 F5 后,浏览器前端究竟发生了什么?
前端·javascript
在掘金801101 小时前
vue3中使用medium-zoom
前端·vue.js
xump2 小时前
如何在DevTools选中调试一个实时交互才能显示的元素样式
前端·javascript·css
Front_Yue2 小时前
深入探究跨域请求及其解决方案
前端·javascript
抱琴_2 小时前
【Vue3】我用 Vue 封装了个 ECharts Hooks,同事看了直接拿去复用
前端·vue.js
风止何安啊2 小时前
JS 里的 “变量租房记”:闭包是咋把变量 “扣” 下来的?
前端·javascript·node.js
老华带你飞2 小时前
社区养老保障|智慧养老|基于springboot+小程序社区养老保障系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·社区养老保障
有点笨的蛋2 小时前
深入理解 JavaScript 原型机制:构造函数、原型对象与原型链
前端·javascript