Vue 教程：模板引用（Template Refs）与组件实例访问的完整指南

快速概述

模板引用（Template Refs）是 Vue 提供的一种直接访问 DOM 元素或子组件实例的机制，用于在需要手动操作 DOM、集成第三方库或调用子组件方法时，绕过响应式数据流实现精准控制。适用场景包括：聚焦输入框、测量元素尺寸、初始化图表库、访问子组件公开方法等。前置环境要求：熟悉命令行，并安装 ^20.19.0 或 >=22.12.0 版本的 Node.js，推荐使用 Vue 官方脚手架 create-vue 创建基于 Vite 的项目。

核心概念与原理

Vue 采用声明式渲染，但某些场景仍需直接访问底层 DOM 或组件实例。模板引用通过在元素或组件上添加 ref 属性，将对应实例挂载到组件实例的 $refs 对象上。在选项式 API 中，通过 this.$refs 访问；在组合式 API 中，通过 ref() 创建引用变量并在 onMounted 后访问。其工作流程为：模板编译时注册 ref，组件挂载后填充引用，卸载前清空，因此只能在挂载后安全访问。

实战步骤与代码

步骤 1：创建 Vue 项目

在命令行中运行以下命令（不要带上 $ 符号）：

$ npm create vue@latest

按提示配置项目名称、TypeScript、Vue Router 等选项。

步骤 2：选项式 API 中访问 DOM 元素

在 methods 中定义的方法可通过事件绑定调用，也可在组件其他方法中调用。

步骤 3：组合式 API 中访问子组件实例

在组合式 API 中，ref() 创建的变量在模板中通过 ref="childRef" 绑定，挂载后 childRef.value 即为组件实例。

常见坑点与优化

• 访问时机错误：在 onMounted 之前访问 $refs 会得到 undefined，因为引用尚未填充。务必在挂载后或事件回调中访问。
• v-for 中的 ref：在 v-for 中使用 ref 时，$refs 会变成一个数组，需注意索引对应关系。
• 组件实例暴露：使用 <script setup> 时，子组件默认封闭，需通过 defineExpose 暴露方法或属性，否则父组件无法访问。
• 性能优化：避免过度使用 ref 操作 DOM，优先使用响应式数据驱动视图；对于频繁操作，可结合 nextTick 确保 DOM 更新完成。

Vue 2.0 已于 2023 年 12 月 31 日停止更新，建议新项目直接使用 Vue 3。