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>
相关推荐
kyriewen16 小时前
2026 年了,这 6 个 npm 包可以卸载了——浏览器原生 API 已经能替代
前端·javascript·npm
铁皮饭盒17 小时前
bun直接tsx,优雅!
javascript·后端
假如让我当三天老蒯19 小时前
Options API(选项式 API) 和 Composition API(组合式 API)
前端·vue.js·面试
_柳青杨19 小时前
一文吃透 Node.js 事件循环:从原理到 Node 20+ 重大变更
javascript·后端
JieE2121 天前
LeetCode 101. 对称二叉树|JS 递归 + 迭代双解法,彻底搞懂镜像判断
javascript·算法
冬奇Lab1 天前
AI Workflow 定义的四次演进:从 Markdown 到 JS 脚本,再到分布式多 Agent
javascript·人工智能·agent
一颗烂土豆2 天前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
kyriewen2 天前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
weedsfly2 天前
迭代器、生成器与异步迭代——让数据“按需流动”的艺术
前端·javascript
假如让我当三天老蒯2 天前
前端跨域解决方案(学习用)
前端·javascript·面试