vue 3 中 refs 用于获取 dom 元素或组件实例，提供对 dom 的精确控制。使用方法有 template refs 和 api refs 两种，返回的类型可以是元素、组件实例、数组或 null。refs 主要用于访问 dom 节点、获取组件实例、共享数据和实现复杂交互逻辑。不过，建议在 mounted() 生命周期钩子中使用 refs，避免在模板中使用，以保持代码的可维护性。
Vue 3 中使用 Refs
Refs 是 Vue 3 中一种用于获取 DOM 元素或组件实例的机制。它允许你直接访问组件中的特定 DOM 节点或组件实例，从而实现对 DOM 的精确控制。
如何使用 Refs
有两种主要方式可以使用 Refs：
立即学习“前端免费学习笔记（深入）”；
-
Template Refs: 使用
refattribute，直接在模板中分配一个 ref。
<code class="html"><template> <button ref="myButton">点击我</button> </template></code>
-
API Refs: 使用
this.$refs属性，在组件内部访问 refs。
<code class="javascript">export default {
mounted() {
console.log(this.$refs.myButton); // 输出: <button ref="myButton">点击我</button>
}
};</code>Refs 的类型
Refs 可以是以下类型的对象：
- Element: 如果 ref 指向一个 DOM 元素，则它是一个 HTML 元素对象。
- 组件实例: 如果 ref 指向一个组件实例，则它是一个组件的 Vue 实例。
- Array: 如果 ref 指向多个元素或组件，则它是一个数组，包含相应的对象。
- Null: 如果 ref 没有指向任何内容，则它为 null。
Refs 的用途
Refs 通常用于以下场景：
- 访问 DOM 节点以进行手动操作或绑定事件。
- 获取组件实例以调用方法或访问数据。
- 在不同组件之间共享数据或方法。
- 实现复杂的交互逻辑，如拖放或动画。
注意:
- Refs 是响应式的，这意味着当它们引用的元素或组件发生更改时，它们的值也会更新。
- 始终在
mounted()生命周期钩子中使用 Refs，以确保 DOM 已呈现。 - 如果 ref 指向一个不确定的元素或组件，则它将返回 null。
- 尽量避免在模板中使用 Refs，因为这可能会使代码更难以维护。
