本文深入解析 Vue 组件中 DOM 引用（template refs）的可用时机，阐明为何在父组件 onMounted 中直接访问子组件暴露的 ref 仍为 null，以及 nextTick() 如何确保 DOM 和响应式引用真正就绪。
本文深入解析 vue 组件中 dom 引用（template refs）的可用时机，阐明为何在父组件 `onmounted` 中直接访问子组件暴露的 ref 仍为 `null`，以及 `nexttick()` 如何确保 dom 和响应式引用真正就绪。
在 Vue 的组件生命周期中，“挂载完成”（mounted）并不等价于“所有 DOM 引用已就绪”。这是一个常被误解的关键点。虽然官方文档明确指出：子组件的 mounted 钩子会在父组件 mounted 之前执行，但这仅表示子组件自身的 DOM 已插入文档并完成首次渲染；而父组件中通过 ref 回调（如 <Comp :ref="..."/>）所接收的子组件实例，其内部暴露的响应式引用（例如 defineExpose({ inner: el }) 中的 el），其底层 DOM 元素的赋值操作——即 el.value = <p> 这一关键步骤——发生在子组件 mounted 钩子执行之后、且属于 Vue 内部异步更新队列中的一个微任务。
这是因为 Vue 的响应式系统将 DOM 更新批量延迟至下一个“tick”（即 microtask 队列清空后）统一执行，以保障性能与一致性。即使子组件已 mounted，其模板中 ref="el" 所绑定的 ref 对象的 .value 赋值，仍需等待当前同步任务栈执行完毕、进入下一轮事件循环微任务阶段才能完成。因此，在父组件 onMounted 的同步回调中立即读取 myRef.value.inner.value，必然得到 null——此时子组件虽已挂载，但其内部 ref 尚未被 Vue 框架填充。
✅ 正确做法是使用 nextTick() 显式等待：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import Comp from './Comp.vue'
const myRef = ref(null)
function logMe() {
console.log('Current ref:', myRef.value?.inner?.value) // 安全访问
}
onMounted(async () => {
// ✅ 等待 DOM 和所有 ref 赋值完成
await nextTick()
logMe() // 此时 myRef.value.inner.value 已为真实 DOM 元素
})
</script>
<template>
<button @click="logMe">Log the element</button>
<Comp :ref="(el) => { myRef.value = el ? el.inner : null }" />
</template>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 onMounted 同步获取跨组件 ref 值，这是 Vue 响应式更新机制决定的固有行为；
- nextTick() 返回 Promise，推荐 await nextTick() 写法，语义清晰且避免回调嵌套；
- 若需在 defineExpose 中暴露多个 ref，建议统一包裹在响应式对象中（如 defineExpose({ $el: el, $canvas: canvas })），便于类型推导与结构化访问；
- TypeScript 用户可配合 InstanceType<typeof Comp> + typeof defineExpose 实现精准类型提示，提升开发体验。
总结来说：mounted 标志组件“可见”，而 nextTick() 才真正标志“可编程访问”。理解这一异步边界，是安全操作 DOM、集成第三方库（如 Konva、Chart.js）及构建健壮组件通信模式的基础前提。
