当前位置：首页 > news >正文

Vue 3 ～ 3.5 版本useTemplateRef使用

news 来源：原创 2025/7/12 23:54:57

注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～

2024 年 9 月 1 日发布的组合式 API：辅助 | Vue.js，引入一个小小的新 API useTemplateRef()，它用于访问实际的 DOM 节点。

组合式 API：辅助 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/api/composition-api-helpers.html#usetemplateref

在 Vue 3.5 之前，访问 DOM 节点需要使用 ref() 函数。Vue 把这种访问 DOM 节点的机制叫做模板引用（Template Refs）。

使用 ref() 函数有两个限制。首先，HTML 标签的 ref 属性必须和 <script> 中的 ref 变量名同名。这虽然不算什么大问题，但是用起来有点儿奇怪。

<template><!-- ref 属性名为 myInput --><input ref="myInput" type="text" />
</template><script setup>
import { ref, onMounted } from 'vue'// 变量名也必须为 myInput，和 HTML ref 属性保持一致
const myInput = ref(null)onMounted(() => {myInput.value.focus()
})
</script>

其次，ref() 变量的类型推断不足。比如，我在 VS Code 中，把鼠标悬浮于 myInput.value 之上，看不到它对应 DOM 的实际类型。

当类型不明确时，VS Code 的智能补全提示就会比较混乱，基本不会返回需要的属性；

useTemplateRef() 是对模板引用机制的一次小优化。它是如何解决上述两个问题的？

首先，useTemplateRef() 的用法更像原生的 document.getElementById()。变量名可以随便起，只要保证函数参数名和 ref 属性名一致即可，这种语法更符合常理。

<template><input ref="myInput" type="text" />
</template><script setup>
import { useTemplateRef, onMounted } from 'vue'// 变量名不必和 ref 属性保持一致，两者通过参数名进行关联
const inputRef = useTemplateRef('myInput')
onMounted(() => {inputRef.value.focus()
})
</script>// 官网示例：
<script setup>
import { useTemplateRef, onMounted } from 'vue'// 变量名不必和 ref 属性保持一致，两者通过参数名进行关联
const inputRef = useTemplateRef('input')onMounted(() => {inputRef.value.focus()
})
</script><template><input ref="input" />
</template>

其次，useTemplateRef() 的返回值类型会进行自动类型推断，智能提示更有保证。

建议在 Vue 3.5 及以上版本中优先使用 useTemplateRef() 函数，而 ref() 仅适用于 Vue 3.5 之前的版本

Vue 3 ～ 3.5 版本useTemplateRef使用

注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～ 2024 年 9 月 1 日发布的组合式 API：辅助 | Vue.js，引入一个小小的新 API useTemplateRef()，它用于访问实际的 DOM 节点。 …...

编程日记 2025/7/12 23:54:57

使用F5-tts复刻音色

最近第一人称视角的视频很火，想试试看复刻一下电视剧中某个角色的音色。看了下字节的API，嗯。。。138元一个音色，还不包括合成语音的费用，算了还是看看开源项目吧。随便搜了搜，发现了两个项目一个是openvoice&#x…...

编程日记 2025/7/10 20:14:12

使用亮数据代理IP+Python爬虫批量爬取招聘信息训练面试类AI智能体（附完整源码）

文章目录一、为什么要用代理IP？(重要！)二、环境准备（5分钟搞定）三、爬虫核心代码解析（含反反爬技巧）四、数据清洗的3个关键步骤五、训练AI智能体的实战技巧六、法律风险防范（必须看&#xff01…...

编程日记 2025/7/9 23:54:04

[软件工程]第二章题目汇总

1 [单选题] 原型化模型是（ ）。 A、适用于客户需求被明确定义的情况 B、很难产生有意义产品的一种冒险模型 C、提供一个精确表述的形式化规格说明 D、适用于客户需求难以清楚定义的情况 2 [单选题] 下列关于增量模型的说法正确的是（ &…...

编程日记 2025/6/27 23:40:43

Java EE进阶1：导读

1.发展历程 2.学习内容前⾯的课程中,学习的是Java基础,JavaEE主要学习Java的应用,也就是学习Java在企业中是如何应用的 Java更多场景是业务开发,更狭义点可以理解为web开发.所以咱们的学习也是围绕着如何使用Java来做web开发 2.1 什么是Web开发？ web&#xff08…...

编程日记 2025/6/27 23:34:48

Unity自定义shader打包SpriteAtlas图集问题

Unity打包图集还是有一些坑的，至于图集SpriteAtlas是什么请参考我之前写的文章：【Sprite Atlas】Unity新图集系统SpriteAtlas超详细使用教程_spriteatlas 使用-CSDN博客问题： 今天碰到的问题是，shader绘制的时候，因…...

编程日记 2025/6/27 23:13:19

系统集成项目管理工程师学习笔记之启动过程组

第十章启动过程组制定项目章程定义制定项目章程是编写一份正式批准项目并授权项目经理在项目活动中使用组织资源的文件的过程。正式批准的项目文件作用 1、明确项目与组织战略目标之间的直接联系 2、确立项目的正式地位 3、展示组织对项目的承诺本过程仅开展一…...

编程日记 2025/7/11 10:06:12

vscode 常用调试

一、文件执行 python script.py {"name": "Python 调试程序: 当前文件","type": "debugpy","request": "launch","program": "${file}","console": "integratedTerminal"…...

编程日记 2025/6/30 17:27:20

Java 07异常

异常指的是程序在编译和执行的过程中，出现的非正常的情况； 当然语法错误并不属于错误异常体系最大的Throwable; 分为两个：Error ExceptionError 严重级别问题常见的堆内存溢出栈内存溢出Exception 分为两个子类 RuntimeException 运…...

编程日记 2025/6/27 23:31:15

2025年PMP 学习二十三 16章高级项目管理

2025年PMP 学习二十三 16章高级项目管理文章目录 2025年PMP 学习二十三 16章高级项目管理高级项目管理战略管理战略管理的组成要素：企业战略转化为战略行动的阶段： 组织战略类型战略组织类型组织级项目管理OPM（公司项目管理） 组…...

编程日记 2025/6/27 23:09:02

【Java高阶面经：微服务篇】1.微服务架构核心：服务注册与发现之AP vs CP选型全攻略

一、CAP理论在服务注册与发现中的落地实践 1.1 CAP三要素的技术权衡要素AP模型实现CP模型实现一致性最终一致性（Eureka通过异步复制实现）强一致性（ZooKeeper通过ZAB协议保证）可用性服务节点可独立响应（支持分区存活）分区期间无法保证写操作（需多数节点可用）分区容错性…...

编程日记 2025/6/27 23:01:56

ISCC 2025决赛 wp

PWN Dilemma 64位程序没有开启PIE，并且过滤了execve，不能使用system这些的了，所以要考虑ORW来做进入main函数分析，这里有两个函数一个func_1一个func_2。这两个函数都有漏洞，以下是详细分析： 对于func…...

编程日记 2025/7/12 15:04:50

C++（5）switch语句循环while

这是一个电影评分的程序 default 就是如果上述的都没有执行就统一的执行default的内容。然后记得break ___________________________________ 循环 （while） while的使用方式输出 0-9的while循环...

编程日记 2025/7/12 23:53:28

操作系统----软考中级软件工程师（自用学习笔记）

目录 1、计算机系统层次结构 2、程序顺序执行的特征 3、程序并发执行的特征 4、三态模型 5、同步与互斥 6、信号量机制 7、PV操作 8、死锁 9、进程资源图 10、死锁避免 11、线程 12、程序局部性原理 13、分页存储管理 14、单缓冲器 15、双缓冲区 16、磁盘调度算…...

编程日记 2025/7/12 23:49:44

利用Spring Boot和Redis构建高性能缓存系统

利用Spring Boot和Redis构建高性能缓存系统引言在现代Web应用中，缓存是提升系统性能的关键技术之一。Redis作为一种高性能的内存数据库，广泛应用于缓存场景。本文将介绍如何利用Spring Boot和Redis构建一个高性能的缓存系统，涵盖Redis的基…...

编程日记 2025/6/27 23:07:05

每日一题：1、虚拟IPv4地址转换为32位整数（JS）

题目背景我们需要处理一种特殊的虚拟IPv4地址，这种地址由4个小节组成，每节之间用#分隔。与标准IPv4地址不同，虚拟IPv4地址的第一节范围是1~128，后三节的范围是0~255。我们需要将这种虚拟IPv4地址转换为一个唯一的32位整数。如果…...

编程日记 2025/6/27 23:24:25

[Vue]组件介绍和父子组件间传值

组件介绍 Vue3的 .vue文件中的主要部分分别分为三个：<template>、<script>、<style> <template>： 结构，相当于原html中的<head><body><footer>部分。原本的index.html现在只做一个容器&#xff0…...

编程日记 2025/6/27 23:24:12

Vue3 中使用 provide/inject 实现跨层级组件传值失败的原因及解决方案

1、基础用法父组件： <script setup> import { ref, provide } from vue; import ChildComponent from ./ChildComponent.vue; const parentData ref(初始数据); // 提供数据 provide(parentData, parentData); </script>子组件： <sc…...

编程日记 2025/7/9 10:30:41

Git Hooks 和自动生成 Commit Message

前言： 企业编程必须始终依赖流程，而不是个人。个人能力很重要，应该鼓励，但不能指望它，否则软件质量将不一致，没有可持续性。一旦顶级程序员跳槽，公司就会陷入困境。企业应该努力改进工作流程&am…...

编程日记 2025/6/27 23:02:10

【小明剑魔视频Viggle AI模仿的核心算法组成】

Viggle AI 作为一款先进的生成式视频AI工具，其核心技术栈融合了多项前沿算法。以下是深度解析其核心算法架构及实现原理： 一、核心算法组成 1. 运动控制生成（Motion Control Generation） 算法框架：基于扩散模型&…...

编程日记 2025/6/27 23:19:59

Linux学习心得问题整理（二）

day05 Linux基础入门 Linux语法解析如何理解ssh远程连接?如何使用ssh使用远程连接服务？ ssh进也称远程服务终端，常见连接方式可以包括windows和Linux两种方式首先咱们使用windows窗口进行连接，这里就采用xshell连接工具来给大家做演示吧…...

编程日记 2025/7/3 8:30:11

百度网盘加速补丁v7.14.1.6使用指南｜PC不限速下载实操教程

软件介绍本加速补丁可突破百度网盘限速限制，无需会员、无次数限制，实测下载速度可达带宽峰值。三步极速配置教程 1. 环境准备 → 卸载电脑原有百度网盘客户端（避免冲突） → 关闭杀毒软件/安全卫士（防止误删补丁&am…...

编程日记 2025/6/27 23:17:21

RocketMQ消息拉取模式详解

RocketMQ提供了两种消息拉取模式，Pull模式（主动拉取）和 Push模式（长轮询）。一、消息拉取模式分类 1. Pull模式（主动拉取） 特点：消费者主动向Broker发送请求拉取消息实现类&#…...

编程日记 2025/7/12 23:46:37

C++23 容器从其他兼容范围的可构造性与可赋值性 (P1206R7)

文章目录背景与动机提案内容与实现细节提案 P1206R7实现细节编译器支持对开发者的影响提高灵活性简化代码向后兼容性总结 C23标准引入了对容器构造和赋值的新特性，这些特性使得容器能够更灵活地从其他兼容范围初始化，并支持从范围赋值。这些改进由提案…...

编程日记 2025/7/12 23:45:54

深入解析 HTTP 中的 GET 请求与 POST 请求

在互联网的世界里，数据的传输与交互无时无刻不在发生。HTTP（超文本传输协议）作为 Web 应用的基石，承载着浏览器与服务器之间的通信重任。而 GET 请求和 POST 请求，作为 HTTP 协议中最为常用的两种请求方法，…...

编程日记 2025/7/12 23:38:02

华三（H3C）IRF堆叠心跳的LACP MAD、BFD MAD和ARP MAD差异

华三（H3C）IRF堆叠心跳的三种MAD（多主检测）机制——LACP MAD、BFD MAD和ARP MAD在实现原理、组网要求及适用场景上存在显著差异。以下是三者的对比分析： 一、核心区别对比特性LACP MADBFD MADARP MAD检测原理扩展LAC…...

编程日记 2025/6/30 8:26:58

std::mutex mtx; int shared_data 0;void increment() {std::lock_guard<std::mutex> lock(mtx); // 自动加锁shared_data; // 临界区 } // 离开作用域时自动解锁std::lock_guard 在离开作用域时自动解锁的行为是基于 C 的 RAII (Resource Acquisition Is Initializa…...

编程日记 2025/7/12 23:39:40

深入解析前端 JSBridge：现代混合开发的通信基石与架构艺术

引言：被低估的通信革命在移动互联网爆发式增长的十年间，Hybrid App（混合应用）始终占据着不可替代的地位。作为连接 Web 与 Native 的神经中枢，JSBridge 的设计质量直接决定了应用的性能上限与开发效率。本文将突破传…...

编程日记 2025/7/12 23:36:27

打破次元壁，VR 气象站开启气象学习新姿势

在教育领域，VR 气象站同样发挥着巨大的作用，为气象教学带来了全新的模式，打破了传统教学的次元壁，让学生们以全新的姿势学习气象知识。在传统的气象教学中，学生们主要通过课本、图片和老师的讲解来学习气象知识。这…...

编程日记 2025/7/12 23:40:28

python八股文汇总（持续更新版）

python装饰器一、装饰器是什么？ 装饰器是Python中一种"化妆师"，它能在不修改原函数代码的前提下，给函数动态添加新功能。本质：一个接收函数作为参数，并返回新函数的工具。作用：像给手机贴膜…...

编程日记 2025/7/12 23:38:54

C#入门系列【基础类型大冒险】从0到1，解锁编程世界的“元素周期表”

C#入门系列【基础类型大冒险】从0到1，解锁编程世界的“元素周期表” 嘿，欢迎来到C#的奇妙世界！如果把编程比作建造一座大厦，那么基础类型就是我们手中的“砖块”和“水泥”。它们看似普通，却构成了所有复杂程序的基石…...

编程日记 2025/7/12 23:39:42

物流项目第四期（运费模板列表实现）

前三期： 物流项目第一期（登录业务）-CSDN博客物流项目第二期（用户端登录与双token三验证）-CSDN博客物流项目第三期（统一网关、工厂模式运用）-CSDN博客模板列表在后台系统中&#xff0c…...

编程日记 2025/7/12 23:40:27

数据中心Overlay解决方案

文档围绕数据中心 Overlay 解决方案展开，指出数据中心向大集中、虚拟化、云业务演进，传统架构存在网络规划复杂、弹性不足、业务扩展受限等问题。Overlay 网络在物理网络上构建虚拟网络，实现名址分离、网络与物理解耦，支持业务灵活部署。方案采用VXLAN 技术（如 SDN 控制模…...

编程日记 2025/7/12 23:35:29

中级网络工程师知识点8

1.无线控制器：实现无线网络统一管理，无缝漫游 2.无线认证系统：实现用户使用用户名和密码认证登录，外来访客通过扫描二维码或者手机短信验证登录无线网络 3.POE交换机：实现无线AP的接入和供电 4.高密吸顶式AP&#x…...

编程日记 2025/7/12 23:42:49

【Linux笔记】——简单实习一个日志项目

🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：Linux 🌹往期回顾🌹： 【Linux笔记】——线程同步信号量与环形队列生产者消费者模型的实现(PV操作) 🔖流水不争&#xf…...

编程日记 2025/7/12 23:37:20

BRIGHTONE : 520-On-Chain WOHOO Carnival

BRIGHTONE is launching the “520-On-Chain WooHoo Carnival,” and the very first blast of $WOOHOO goes live right on schedule—ushering in a new on-chain celebration of joy! At exactly 21:09 on May 20, the “520-On-Chain WooHoo Carnival” officially kicks…...

编程日记 2025/7/12 23:35:28

在Java项目中集成Deepseek大语言模型实践指南

1. 引言随着人工智能技术的发展，大语言模型在各领域应用日益广泛。本文将详细介绍如何在Java项目中集成Deepseek大模型，实现智能文本生成、对话等功能。 2. 前期准备准备Java Spring Boot项目环境确保Maven已配置注册Deepseek账号并获取API密钥获取a…...

编程日记 2025/7/12 23:37:22

医疗影像中，DICOM点云、三角面片实体混合渲染（VR）

此文章，涉及到专业性比较强，所以，大部分的内容，基本上都是示例代码的形式出现。以下的技术路径，完全经过实践验证，并且效果很好，可以放心使用。 1 概述在医学影像中，对DICOM的渲染…...

编程日记 2025/6/29 8:23:36

程序运行报错分析文档

zryhuawei:~/src/modules/Connect$ ./newbuild/OpConnectAidTool \WARNING: MYSQL_OPT_RECONNECT is deprecated and will be removed in a future version. replace into process_tracking (step_id,date,status,context_data,start_time,end_time,error_log) values(?,?,?…...

编程日记 2025/7/12 23:43:31

相关文章：