Vue.js模板引用是组合式API中安全访问DOM或子组件的核心机制，支持DOM操作、子组件方法调用及函数式动态绑定，需配合onMounted、defineExpose等正确使用。
Vue.js 的模板引用（Template Refs）是组合式 API 中访问 DOM 元素或子组件实例的核心机制。它不破坏响应式原则，也不绕过 Vue 的更新流程，而是在合适的时机（如 onMounted 后）提供安全、可控的底层访问能力。
DOM 元素引用：聚焦、尺寸、第三方库集成
给原生元素加 ref 属性，配合 ref(null) 声明，在挂载后即可操作：
- 输入框自动聚焦：
inputRef.value?.focus() - 测量容器宽高：
elRef.value?.offsetWidth或getBoundingClientRect() - 传入 ECharts/Quill 等库：
echarts.init(elRef.value)
注意：ref 值在组件未挂载时为 null，务必在 onMounted 或 nextTick 中使用。
子组件实例引用：调用方法与暴露数据
子组件需显式通过 defineExpose 暴露需要被父组件访问的内容：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 子组件中写：
defineExpose({ validate, reset, currentStep }) - 父组件中声明：
const childRef = ref(null)，模板中写<childcomponent ref="childRef"></childcomponent> - 调用时：
childRef.value?.validate()或读取childRef.value?.currentStep
未暴露的属性或方法无法被父组件访问，这是 Vue 3 的默认封装行为，不是 bug。
函数式 ref：动态绑定与列表项控制
当 ref 需要根据条件或循环生成时，可传入一个函数代替 ref 对象：
<div v-for="(item, i) in list" :ref="(el) => { rows[i] = el }">{{ item }}</div>- 适用于表格行高计算、滚动定位、批量 focus 等场景
- 函数会在元素挂载/卸载时被调用，接收 el 参数，可做判空处理
常见误区与注意事项
避免以下典型错误：
- 在 setup 顶层直接访问
ref.value—— 此时 DOM 尚未渲染，值为 null - 对未使用 defineExpose 的子组件尝试调用其内部方法 —— 会报
undefined is not a function - 在 v-if 为 false 的元素上设 ref —— 元素不渲染，ref 值保持 null，不会自动更新
- 把 ref 当作普通响应式变量监听 —— ref.value 变化不会触发 watchEffect，需显式监听
ref本身
模板引用不是“绕过 Vue”，而是 Vue 在响应式边界内留出的必要出口。用得克制、用得明确，才能兼顾灵活性与可维护性。
