在 Vue 3 的组合式 API 中，onMounted 是一个常用的生命周期钩子，开发者普遍认为它会在组件的 DOM 被挂载到页面后立即执行。然而，这种理解虽然基本正确，但过于简化。onMounted 的实际执行时机比“DOM 挂载后”更微妙，它与 Vue 的异步更新队列和 nextTick 机制紧密相关。本节将深入剖析 onMounted 的执行时机，揭示其与 nextTick 的内在联系，并解答一个关键问题：它真的在 DOM 挂载后执行吗？

一、生命周期的宏观流程

首先，回顾 Vue 组件的生命周期：

1. setup()：执行组合式 API 的逻辑，返回渲染上下文。
2. onBeforeMount：在组件挂载前调用。
3. DOM 挂载：Vue 将虚拟 DOM (VNode) 转换为真实 DOM 并插入页面。
4. onMounted：在组件挂载完成后调用。

从宏观上看，onMounted 确实在 DOM 挂载后执行。但“挂载完成”具体指什么？这需要深入到 Vue 的更新机制。

---

二、Vue 的异步更新队列

Vue 2.x 和 3.x 都采用异步更新队列来优化性能。当你修改响应式数据时，Vue 不会立即更新 DOM，而是将组件的更新操作推入一个队列，并在“下一个 tick”时批量执行。

const state = reactive({ count: 0 });

// 修改数据
state.count = 1;
state.count = 2;
state.count = 3;

// DOM 只会更新一次，而不是三次

这个“下一个 tick”由 nextTick 实现，它利用 Promise.then、MutationObserver 或 setTimeout 等微/宏任务机制，确保 DOM 更新在当前同步代码执行完毕后进行。

---

三、onMounted 的实际执行时机

onMounted 并非在 mount 函数执行完毕后立即同步调用。它的执行被安排在 Vue 的异步更新队列中。

1. 源码级解析

在 Vue 3 的渲染器源码中，组件挂载的大致流程如下：

function mountComponent() {
  // 1. 创建组件实例
  const instance = createComponentInstance();

  // 2. 执行 setup()
  setupComponent(instance);

  // 3. 执行 onBeforeMount 钩子（同步）
  if (instance.bm) {
    invokeArrayFns(instance.bm);
  }

  // 4. 创建并挂载 DOM
  const subTree = renderComponentRoot(instance);
  patch(null, subTree, container, anchor);

  // 5. 将 onMounted 钩子推入队列
  if (instance.m) {
    queuePostFlushCb(instance.m);
  }
}

关键点在于 queuePostFlushCb(instance.m)。它将 onMounted 回调放入一个队列，该队列会在DOM 更新刷新（flush）后执行。

2. 与 nextTick 的关系

queuePostFlushCb 的执行时机与 nextTick 高度相关。具体来说：

• onMounted 的回调被安排在 nextTick 的回调队列中。
• 它会在 DOM 更新完成后，但在浏览器下一次重绘之前执行。

你可以这样理解：

// 伪代码
nextTick(() => {
  // 此时 DOM 已更新
  onMounted(); // 执行 onMounted 钩子
});

因此，onMounted 的执行时机等价于在 nextTick 的回调中执行。

---

四、一个关键实验：验证执行时机

让我们通过一个实验来验证 onMounted 的实际行为：

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log('1. onMounted 执行');
  console.log('DOM 元素:', document.getElementById('counter'));
});

// 模拟 setup 中的异步操作
nextTick(() => {
  console.log('2. nextTick (setup) 执行');
});

// 在 mounted 后立即修改数据
count.value = 1;

// 这个 nextTick 会等到 DOM 更新后执行
nextTick(() => {
  console.log('3. nextTick (after update) 执行');
  console.log('更新后的 DOM:', document.getElementById('counter').textContent);
});
</script>

<template>
  <div id="counter">{{ count }}</div>
</template>

输出顺序：

1. onMounted 执行
DOM 元素: <div id="counter">0</div>
2. nextTick (setup) 执行
3. nextTick (after update) 执行
更新后的 DOM: 1

解读：

1. onMounted 执行时，DOM 已经存在，但内容仍是初始值 0。
2. 尽管我们在 onMounted 后立即修改了 count.value，但 DOM 更新是异步的。
3. 第三个 nextTick 在 count 更新后的 DOM 渲染完成后执行，此时才看到 1。

这证明 onMounted 并不保证你能看到所有响应式数据更新后的最终 DOM 状态。它只保证组件的根 DOM 已被插入文档。

---

五、与 nextTick 的对比

特性	onMounted	nextTick
触发时机	组件挂载完成后（异步）	下一个 DOM 更新周期后
调用时机	生命周期钩子，自动调用	手动调用，可传入回调
执行环境	总是在 DOM 挂载后	可在任何时机调用
用途	初始化 DOM 操作（如焦点、第三方库初始化）	等待特定数据更新后的 DOM 状态

关键区别：

• onMounted 是组件级的，只执行一次。
• nextTick 是操作级的，可多次调用，用于等待特定更新后的 DOM。

---

六、必须使用 nextTick 的场景

由于 onMounted 的“延迟”特性，以下场景必须使用 nextTick：

1. 访问更新后的 DOM 内容

onMounted(() => {
  // ❌ 错误：可能读取旧值
  const width = el.offsetWidth;

  // ✅ 正确：等待 DOM 更新
  nextTick(() => {
    const width = el.offsetWidth;
  });
});

2. 触发需要最终布局的第三方库

onMounted(() => {
  // 数据可能还未更新
  chart.update(); // 可能基于旧数据

  nextTick(() => {
    chart.update(); // 基于最新数据
  });
});

3. 动画的精确控制

onMounted(() => {
  // 元素刚挂载，可能还未完成初始渲染
  el.classList.add('animate-in'); // 动画可能不流畅

  nextTick(() => {
    // 确保元素在文档中且样式已计算
    el.classList.add('animate-in');
  });
});

---

七、总结

onMounted 的执行时机比“DOM 挂载后”更精确地描述为：在组件的 DOM 被插入文档后，由 Vue 的异步更新队列调度执行。

• 它确实在 DOM 挂载后执行：组件的根元素已存在于 document 中。
• 但它不是立即执行：它被安排在 nextTick 的回调队列中，与 nextTick 共享相同的执行时机。
• 不保证看到所有更新：在 onMounted 中，你看到的 DOM 可能仍是初始状态，后续的响应式更新需要等待 nextTick。

因此，onMounted 适用于：

• 获取 DOM 元素引用。
• 初始化不需要最新数据的第三方库。
• 设置事件监听器。

而 nextTick 适用于：

• 读取更新后的 DOM 属性（如尺寸、位置）。
• 等待特定数据变化后的 DOM 状态。
• 精确控制动画或布局。

理解 onMounted 与 nextTick 的微妙关系，是掌握 Vue 响应式更新机制的关键一步，能帮助开发者避免常见的 DOM 操作陷阱。