介绍

模板上写 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>

        <input type="button" value="登录" @click="login()">
        <div style="color:red;">{{ msg }}</div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 表单响应式数据
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>

关键要点

标签中的 ref="usernameRef"，与 TS const usernameRef = ref(null)，名称必须对应；
区分两类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。

总结

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

原文出处：/show_1GW3kUWoiOVS.html

介绍