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 暴露需要被父组件访问的内容：
- 子组件中写：
defineExpose({ validate, reset, currentStep }) - 父组件中声明：
const childRef = ref(null)，模板中写 - 调用时：
childRef.value?.validate()或读取childRef.value?.currentStep
未暴露的属性或方法无法被父组件访问，这是 Vue 3 的默认封装行为，不是 bug。
函数式 ref：动态绑定与列表项控制
当 ref 需要根据条件或循环生成时，可传入一个函数代替 ref 对象：
- {{ item }}
- 适用于表格行高计算、滚动定位、批量 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 在响应式边界内留出的必要出口。用得克制、用得明确，才能兼顾灵活性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
