【Vue3】标签的 ref 属性

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用标签的 ref 属性。

传统开发中通常使用 document.getElementById() 获取标签对应的 DOM 元素，如果页面中多个 DOM 元素使用相同的 ID 进行标识，则使用 document.getElementById() 可能获取非目标 DOM 元素。Vue 提供了标签的 ref 属性解决此问题。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。