Vue3 父子组件挂载机制与代码执行顺序：从 “DOM 获取为 null” 问题说起

原创已于 2025-09-24 11:11:41 修改 · 783 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

VUE

于 2025-09-24 11:09:24 首次发布

在 Vue3 项目开发中，我们经常会遇到父子组件通信、DOM 元素获取时机相关的问题。比如最近在开发一个编辑器面板时，就遇到了子组件通过provide/inject获取父组件 DOM 始终为null 的诡异现象 —— 明明父组件 DOM 已经挂载，子组件却始终拿不到最新值。这一问题的根源，本质上是对 Vue3 组件生命周期、代码执行顺序及响应式传递机制的理解不透彻。

本文将结合实际业务案例，深入剖析 Vue3 父子组件的挂载流程、代码执行顺序，并总结常见的避坑指南，帮助你彻底搞懂这类问题。

一、从一个实际问题切入：为什么子组件总是拿到 null？

先回顾下开头提到的业务场景，我们有两个核心组件：

父组件：RightPanel.vue（右侧面板，包含多个 Tab 页）
子组件：ViewControllerPanel.vue（视角设置面板，作为RightPanel的 Tab 内容，懒加载）

业务需求是子组件需要获取父组件的根 DOM 元素（rightPanelRootDiv），用于动态创建预览画布。但实际运行时，子组件执行setShowPreviewByShowType方法时，始终打印 “rightPanelRootDiv is null”。

问题代码片段（简化版）

父组件 RightPanel.vue 的关键代码

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

// 父组件根DOM的ref，初始值为null
const rightPanelRootDivRef = ref<HTMLDivElement | null>()

// 错误：传递的是ref.value（静态值），而非ref本身
provide('rightPanelRootDiv', rightPanelRootDivRef.value)

onMounted(() => {
  // 此时ref已绑定DOM，rightPanelRootDivRef.value不为null
  console.log('父组件DOM挂载完成', rightPanelRootDivRef.value)
})
</script>

<template>
  <div class="right-panel" ref="rightPanelRootDivRef">
    <!-- Tab组件：子组件ViewControllerPanel默认不渲染 -->
    <t-tabs>
      <t-tab-panel value="viewSetting" label="视角设置">
        <ViewControllerPanel />
      </t-tab-panel>
    </t-tabs>
  </div>
</template>

子组件 ViewControllerPanel.vue 的关键代码

<script setup lang="ts">
import { inject, onMounted } from 'vue'

let rightPanelRootDiv: HTMLDivElement | null = null

onMounted(() => {
  // 错误：获取到的是父组件setup阶段传递的初始null
  rightPanelRootDiv = inject<HTMLDivElement | null>('rightPanelRootDiv', null)
  console.log('子组件获取父DOM', rightPanelRootDiv) // 始终为null
})

const setShowPreviewByShowType = () => {
  if (!rightPanelRootDiv) {
    console.log('rightPanelRootDiv is null') // 必然执行
    return
  }
  // 后续创建画布的逻辑...
}
</script>

二、深入理解：Vue3 父子组件的执行顺序与挂载机制

要解决这个问题，必须先搞懂 Vue3 中父子组件的代码执行顺序和DOM 挂载时机—— 这是 Vue 组件开发的核心基础，也是很多 “诡异 bug” 的根源。

1. Vue3 组件的核心生命周期钩子（setup 时代）

Vue3 在setup语法糖中，不再需要显式定义beforeCreate、created等钩子，而是通过以下方式覆盖生命周期：

setup：替代beforeCreate和created，组件初始化时执行（无 DOM）
onMounted：组件 DOM 挂载完成后执行（可操作 DOM）
onUpdated：组件数据更新导致 DOM 重新渲染后执行
onUnmounted：组件卸载前执行

其中，setup和onMounted的执行时机是本次问题的关键。

2. 父子组件的执行顺序：“父 setup → 子 setup → 子 onMounted → 父 onMounted”

Vue3 中，父子组件的生命周期执行遵循 “先初始化父组件，再初始化子组件；先挂载子组件，再挂载父组件” 的规则。具体顺序如下（以本文案例为例）：

执行步骤	组件	执行内容	关键状态
1	父组件	执行`setup`函数	`rightPanelRootDivRef`为 null
2	父组件	执行`provide`（传递 null）	未挂载 DOM
3	子组件（Tab）	因 Tab 懒加载，暂不执行任何逻辑	子组件未初始化
4	父组件	执行`onMounted`	父 DOM 挂载完成（ref 有值）
5	用户操作	手动切换到 “视角设置” Tab	子组件开始初始化
6	子组件	执行`setup`函数	子组件无 DOM
7	子组件	执行`onMounted`	子 DOM 挂载完成，但`inject`到 null

3. 关键结论：父组件的 onMounted 晚于子组件的 onMounted

很多开发者会误以为 “父组件先挂载，子组件后挂载”，但实际恰恰相反：子组件的 DOM 会先于父组件完成挂载。

这是因为父组件的 DOM 包含子组件，只有子组件挂载完成，父组件的 DOM 树才算完整 —— 就像 “先搭好房子的房间（子组件），再封房子的屋顶（父组件）”。

4. 懒加载组件的特殊情况（如 Tab）

本文案例中，子组件ViewControllerPanel是 Tab 的内容，而大部分 UI 组件库（如 TDesign、Element Plus）的 Tab 组件默认是懒加载的：

初始状态下，未激活的 Tab 对应的子组件不会执行setup和onMounted
只有当用户切换到该 Tab 时，子组件才会被初始化并挂载

这就导致了一个特殊的时间差：父组件的 onMounted 早已执行（DOM 已挂载），但子组件才刚刚开始执行 setup—— 此时如果父组件的provide传递的是静态值，子组件必然拿不到最新的 DOM。

三、问题根源：2 个核心错误

结合上述执行顺序，我们可以精准定位 “子组件获取 DOM 为 null” 的两个核心错误：

错误 1：provide 传递的是 “静态值”，而非 “响应式数据”

父组件中，provide('rightPanelRootDiv', rightPanelRootDivRef.value)传递的是ref的.value（即初始的 null），而不是ref本身。

Vue 的provide/inject默认传递的是静态值，不会自动响应数据变化
即使后续onMounted中rightPanelRootDivRef.value更新为真实 DOM，provide传递的值也不会同步更新
子组件inject到的始终是父组件setup阶段传递的初始 null

错误 2：子组件懒加载导致 “inject 时机滞后”

由于子组件是 Tab 懒加载，其onMounted执行时：

父组件的onMounted已执行完毕，rightPanelRootDivRef.value已更新为 DOM
但因为provide传递的是静态值，子组件无法感知到这个变化，只能拿到旧值

四、解决方案：用响应式数据传递 ref

要解决这个问题，核心是利用 Vue3 的ref响应式特性，让provide/inject传递的是 “响应式的 ref”，而非 “静态的.value”。

正确实现步骤（分两步）

步骤 1：父组件传递 ref 本身（而非.value）

修改RightPanel.vue的provide逻辑，传递ref对象（响应式）：

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

const rightPanelRootDivRef = ref<HTMLDivElement | null>()

// 正确：传递ref本身（响应式），子组件可感知值变化
provide('rightPanelRootDiv', rightPanelRootDivRef)

onMounted(() => {
  console.log('父组件DOM挂载完成', rightPanelRootDivRef.value) // 不为null
})
</script>

步骤 2：子组件接收 ref 并获取最新.value

修改ViewControllerPanel.vue的inject逻辑，接收ref对象，再通过.value获取最新 DOM：

<script setup lang="ts">
import { inject, onMounted, Ref, watch } from 'vue'

let rightPanelRootDiv: HTMLDivElement | null = null

onMounted(() => {
  // 1. 接收响应式的ref（类型标注：Ref<HTMLDivElement | null>）
  const rightPanelRootDivRef = inject<Ref<HTMLDivElement | null>>(
    'rightPanelRootDiv', 
    ref(null) // 默认值：空ref
  )

  // 2. 直接获取最新.value（此时父组件DOM已挂载，不为null）
  rightPanelRootDiv = rightPanelRootDivRef.value
  console.log('子组件获取父DOM', rightPanelRootDiv) // 正确拿到DOM

  // （可选）极端情况：若父DOM未挂载，用watch监听变化
  watch(rightPanelRootDivRef, (newVal) => {
    if (newVal) {
      rightPanelRootDiv = newVal
      // 执行依赖DOM的逻辑（如创建预览画布）
    }
  }, { immediate: true }) // immediate：立即执行一次监听
})

const setShowPreviewByShowType = () => {
  if (!rightPanelRootDiv) {
    console.log('rightPanelRootDiv is null') // 不再执行
    return
  }
  // 正常创建预览画布...
}
</script>