面试题：DOM 渲染在哪个 Vue 生命周期钩子中就已经完成？

DOM 渲染在 mounted 生命周期钩子中就已经完成。

详细解释：

在 Vue 的生命周期中，mounted 钩子是一个关键节点：

触发时机：mounted 钩子在组件的首次渲染完成后被调用。此时，Vue 已经将虚拟 DOM (Virtual DOM) 转换为真实 DOM，并将其插入到页面中。
DOM 状态：
- 在 mounted 钩子执行时，组件对应的 DOM 元素已经存在于页面上。
- 你可以通过 this.$el 访问到组件的根 DOM 元素。
- 你可以安全地进行任何需要操作真实 DOM 的操作，例如：
  - 直接操作 DOM 元素（虽然不推荐，但有时必要）。
  - 初始化依赖于 DOM 的第三方库（如图表库 ECharts、地图库 Leaflet、代码高亮库等）。
  - 访问 DOM 元素的几何属性（如 offsetHeight, clientWidth）。
对比其他钩子：
- created：此时组件实例已经创建，数据 (data)、方法 (methods) 等都已初始化，但尚未挂载到 DOM。this.$el 为 undefined，无法访问真实 DOM。
- beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但虚拟 DOM 尚未渲染为真实 DOM 并插入页面。this.$el 仍然不可用。
- mounted：挂载完成，真实 DOM 已存在并可访问。

示例代码：

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    console.log('created: $el is', this.$el) // undefined
    // 不能在这里操作 DOM
  },
  mounted() {
    console.log('mounted: $el is', this.$el) // <div>...</div> (真实 DOM 元素)
    // ✅ 可以在这里安全地操作 DOM
    console.log('Element height:', this.$el.offsetHeight)

    // ✅ 初始化第三方库
    // someChartLib.init(this.$el)
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

总结：

因此，mounted 是确保 DOM 渲染完成并可以安全操作真实 DOM 的第一个生命周期钩子。如果你需要在组件渲染后立即执行与 DOM 相关的操作，mounted 是最合适的时机。

THE END

Vue 基础面试题