vue3.x教程-标签的ref属性，获取元素、组件-马育民老师

# 介绍

模板上写 `ref="xxx"`，用来**获取 DOM 元素 / 组件实例**。

- 如果在普通的 `DOM` 元素上使用，引用指向的就是 `DOM` 元素
- 如果用在 `子组件` 上，引用就指向组件实例

### 一句话理解

相当于标签的 `id` 属性，通过该属性可以获取该标签的DOM

### 应用场景

非空校验时，让控件获取焦点

# 例子

非空校验，如果为空时，让控件获取焦点

```
<template>
    <div>
        <h1>登录</h1><br>
        用户名：<input ref="usernameRef" v-model="username" placeholder="请输入用户名"> 通过 ref 注册引用 <br>
        密码：<input ref="passwordRef" v-model="password" placeholder="请输入密码" type="password"><br>

// 表单响应式数据
const username = ref('')
const password = ref('')
const msg = ref('')

// DOM引用，模板ref名称和变量名保持一致
const usernameRef = ref(null)
const passwordRef = ref(null)

// 登录方法
const login = () => {
    if (username.value === '') {
        msg.value = '请输入登录名！'
        // 获取DOM调用原生focus
        usernameRef.value.focus()
        return
    }

if (password.value === '') {
        msg.value = '输入密码！'
        passwordRef.value.focus()
        return
    }

msg.value = ''
    console.log('username:', username.value)
    console.log('password:', password.value)
}
</script>
```

### 关键要点

1. 标签中的 `ref="usernameRef"`，与 TS `const usernameRef = ref(null)`，名称必须对应；
2. 区分两类ref：
   - `const username = ref('')`：响应式数据（v-model绑定）
   - `const usernameRef = ref(null)`：DOM元素引用，规范上加 `Ref` 后缀防止重名；

# 标签的 `ref` 属性 vs `ref()`函数

- 模板：`ref="xxx"` → **标记DOM/组件**
- JS：`const a = ref()` → **响应式变量**
两者名字一样，用途完全不同，只是配合使用。

# 关键知识点

### 2. 生命周期限制

- `setup` 执行阶段：DOM还没生成 → `ref.value = null`
- **只能在 onMounted / onUpdated 内访问DOM**

### 3. v-if 陷阱

元素被 `v-if="false"` 销毁时，`ref.value` 自动变回 `null`

```
<div v-if="show" ref="boxRef"></div>
```

show 切换 false → boxRef.value = null

### 4. v-show 区别

v-show只是css隐藏，元素仍存在，ref一直能拿到dom。

# 总结

1. 模板 `ref="变量名"`，JS创建同名 `ref(null)`；
2. 挂载后 `.value` 获取 DOM / 组件；
3. 获取子组件必须子组件 `defineExpose`；
4. v-for 需要函数ref收集多个元素；
5. 不要用ref直接操作DOM，优先Vue数据驱动。

原文出处：http://www.malaoshi.top/show_1GW3kUWoiOVS.html