Vue3 ref 属性

Vue3 内置属性

ref 属性用于给元素或子组件注册引用信息，以便在 JavaScript 代码中直接访问 DOM 元素或组件实例。

基本说明

ref 是 Vue 中获取 DOM 元素或组件实例的重要方式。它允许我们在 Vue 实例挂载后直接操作 DOM 或调用子组件的方法。

类型: String | Function

作用: 访问 DOM 元素或子组件实例，进行焦点控制、方法调用等操作。

基本用法

1、Options API 中使用 ref

在 Options API 中，ref 注册的引用会存储在组件实例的 $refs 对象中：

实例

2、Composition API 中使用 ref

在 Composition API 中，推荐使用 useTemplateRef 来获取模板引用：

实例

使用场景

1、访问 DOM 元素

使用 ref 可以直接访问 DOM 元素，进行焦点控制、获取值等操作：

实例

2、访问子组件实例

使用 ref 可以访问子组件的实例，调用子组件的方法或访问其数据：

实例

3、函数式 ref

ref 也可以接受一个函数，这个函数会在每次更新时被调用，可以完全控制引用的存储位置：

实例

注意事项

ref 注册时机：因为 ref 本身是由渲染函数的结果创建的，所以必须在组件挂载后才能访问它们。如果在 created 生命周期钩子中访问，$refs 还是空对象。

非响应式：$refs 是非响应式的，因此不应该在模板中将其用于数据绑定。只在 JavaScript 中使用它进行 DOM 操作。

避免滥用 ref：尽可能通过数据驱动和事件处理来操作 DOM 和子组件。过度使用 ref 会使代码难以维护。

实例

与 v-for 配合

ref 也可以用于 v-for，会创建一个包含所有对应 DOM 元素或组件实例的数组：

实例

Vue3 内置属性