ref 可安全获取 DOM 元素或子组件实例，需模板绑定同名 ref 属性、脚本中用 ref(null) 声明，并在 onMounted 后通过 value 访问；绑定子组件时须配合 defineExpose 暴露内容。
在 Vue 3 中，ref 不仅用于响应式数据，还能安全、精准地获取 DOM 元素或子组件实例。关键在于：模板中用 ref 属性绑定，逻辑中用同名的 ref() 响应式引用接收，且需等组件挂载（onMounted）后再访问。
ref 绑定 DOM 元素
适用于聚焦输入框、滚动定位、获取尺寸等场景。Vue 会自动将原生元素赋值给对应的 ref 变量。
- 模板中写
<input ref="inputRef">，注意属性名与 JS 中 ref 变量名一致 - 脚本中定义
const inputRef = ref(null)，初始值推荐null，避免未挂载时误操作 - 在
onMounted钩子中使用，如inputRef.value?.focus()，加可选链防止报错 - 若元素是条件渲染（v-if），需确保它已渲染再访问，否则
value仍为null
ref 绑定子组件实例
用于调用子组件暴露的方法或读取其内部状态（需配合 defineExpose）。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 子组件中必须显式调用
defineExpose({ methodA, dataB })，否则父组件拿到的是空代理对象 - 父组件模板写
<childcomponent ref="childRef"></childcomponent>，JS 中对应const childRef = ref(null) - 同样要在
onMounted后访问，如childRef.value?.methodA() - 不建议过度依赖 ref 调用子组件方法，优先考虑 props + emits 的通信方式
ref 的响应式特性与注意事项
ref 本身是响应式包装器，但 DOM 元素和组件实例不是响应式对象——它们只是被“持有”在 ref 中。
立即学习“前端免费学习笔记（深入）”；
-
ref.value是原始值（DOM 节点或组件实例），修改它不会触发视图更新 - 不要对
ref.value重新赋值为其他 DOM 元素，这会破坏 Vue 的内部追踪 - 在
v-for中使用 ref 会得到数组（多个元素），需用ref数组或refs（Vue 3.3+ 新语法）管理 - 组合式 API 中，避免在 setup 返回时直接解构 ref（如
const { inputRef } = refs），会丢失响应性
常见错误与调试技巧
多数问题源于时机不对或绑定不匹配。
- 控制台报 “Cannot read property 'xxx' of null” → 检查是否漏了
onMounted，或 ref 名拼写不一致 - ref 始终为 null → 查看元素是否被 v-if 移除、是否在 Suspense 中、或是否用了 v-show（v-show 不影响 ref 绑定）
- 想在 computed 或 watch 中访问 ref？可以，但要确保它已有值，否则加空值判断
- 调试时可在
onMounted打印console.log(inputRef.value)确认是否获取成功
