目录 Vue 中 ref 与 $refs 详解：从基础到实战 一、ref 与 $refs 基础概念 1.1 什么是 ref？
1.2 什么是 $refs？
二、ref 与 $refs 的核心区别 三、ref 与 $refs 的使用场景 3.1 操作 DOM 元素 3.2 访问子组件方法和属性 3.3 在 v-for 中使用 ref 四、使用注意事项 4.1 访问时机 4.2 响应式问题 4.3 与 v-if 一起使用 4.4 避免过度使用 五、实际案例：表单验证组件 六、总结 在 Vue 开发中，我们经常需要操作 DOM 元素或访问子组件实例，
ref
和
$refs
就是实现这一需求的重要工具。
本文将全面讲解
ref
与
$refs
的概念、区别、用法及注意事项，帮助你在实际开发中灵活运用。
一、ref 与 $refs 基础概念 1.1 什么是 ref？
ref
是 Vue 提供的一个特殊属性，用于在模板中为 DOM 元素或子组件添加标识。
它就像一个 "标签"，让我们可以在代码中方便地找到对应的元素或组件。
ref
的值是一个字符串，相当于给元素或组件起了一个唯一的名字，便于后续查找。
1.2 什么是 $refs？
$refs
是 Vue 实例上的一个特殊属性，它是一个对象，用于存储所有通过
ref
属性标识的 DOM 元素或子组件实例。
当 Vue 解析模板时，会将所有带有
ref
属性的元素或组件收集到
$refs
对象中，其键是
ref
定义的名称，值是对应的 DOM 元素或组件实例。
// 访问DOM元素
const inputElement = this.$refs.usernameInput;
// 访问子组件实例
const userComponent = this.$refs.userInfoComponent;
二、ref 与 $refs 的核心区别 特性ref$refs 存在位置模板中（HTML 部分）组件实例中（JavaScript 部分）作用为元素或组件添加标识存储并提供访问标识的元素或组件的方式类型属性（字符串值）对象访问时机模板解析时处理组件挂载后可用 简单来说，
ref
是 "标记"，
$refs
是 "存储标记结果的容器"。
三、ref 与 $refs 的使用场景 3.1 操作 DOM 元素 最常见的场景是直接操作 DOM 元素，例如获取输入框的值、设置焦点、修改样式等。
3.2 访问子组件方法和属性 当需要调用子组件的方法或访问子组件的属性时，可以通过
ref
和
$refs
实现。
{{ message }}
3.3 在 v-for 中使用 ref 当在
v-for
中使用
ref
时，
$refs
中对应的属性会是一个数组，包含所有相关的 DOM 元素或组件。
-
{{ item.name }}
四、使用注意事项 4.1 访问时机
$refs
只有在组件挂载完成后才会被填充，在挂载之前（如
created
生命周期钩子中）访问会得到
undefined
。
4.2 响应式问题
$refs
不是响应式的，Vue 不会追踪
$refs
的变化。
因此，不应该在模板中直接使用
$refs
。
{{ $refs.myInput.value }}
应该通过数据属性间接同步 DOM 状态：
{{ inputValue }}
4.3 与 v-if 一起使用 当使用
v-if
控制元素显示隐藏时，元素未渲染时
$refs
中不会有对应的属性。
4.4 避免过度使用 虽然
ref
提供了方便的 DOM 访问方式，但在 Vue 开发中，应优先使用数据驱动的方式操作界面，而非直接操作 DOM。
过度使用
ref
会使代码更难维护，也不符合 Vue 的设计理念。
五、实际案例：表单验证组件 下面是一个使用
ref
和
$refs
实现的简单表单验证组件：
在这个案例中，我们使用
ref
标识表单字段，然后在验证方法中通过
$refs
访问这些字段的值进行验证，展示了
ref
和
$refs
在实际开发中的典型应用。
六、总结
ref
和
$refs
是 Vue 中用于访问 DOM 元素和子组件的重要工具，它们的关系和区别可以概括为：
ref
是模板中的属性，用于标识元素或组件
$refs
是组件实例上的对象，用于存储和访问通过
ref
标识的元素或组件 合理使用
ref
和
$refs
可以简化 DOM 操作和组件通信，但也要注意它们的使用时机和限制，避免过度依赖直接 DOM 操作，保持 Vue 数据驱动的开发理念。
掌握
ref
和
$refs
的使用，将有助于你更灵活地处理各种复杂的业务场景，提高 Vue 开发效率。