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>
相关推荐
进击的尘埃13 分钟前
策略模式和状态模式到底啥区别?拿审批流表单说个明白
javascript
专业抄代码选手19 分钟前
在react中,TSX是如何转变成JS的
前端·javascript
进击的尘埃1 小时前
SOLID 原则在 React 组件库里怎么落地:五个重构案例
javascript
本末倒置1831 小时前
Bun 内置模块全解析:告别第三方依赖,提升开发效率
前端·javascript·node.js
踩着两条虫1 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(二):核心概念之DSL模式与数据模型
前端·vue.js·ai编程
进击的尘埃1 小时前
中介者模式:把面板之间的蜘蛛网拆干净
javascript
Hilaku2 小时前
OpenClaw 很爆火,但没人敢聊它的权限安全🤷‍♂️
前端·javascript·程序员
兆子龙3 小时前
React Native 完全入门:从原理到实战
前端·javascript
SuperEugene3 小时前
Vite 实战教程:alias/env/proxy 配置 + 打包优化避坑|Vue 工程化必备
前端·javascript·vue.js
兆子龙3 小时前
一文彻底搞懂 OpenClaw 的架构设计与运行原理(万字长文)
javascript