深入解析：DOM 渲染在哪个 Vue 生命周期钩子中就已经完成？

一、DOM 渲染完成时机的深度解析

1.1 生命周期的总体流程

Vue 的生命周期是指一个 Vue 实例从创建开始到销毁的整个过程。在数据驱动的前端开发中，理解每个阶段对 DOM 的影响至关重要。为了直观地理解 DOM 渲染完成的时间点，我们可以通过以下流程图来查看组件初始化到挂载的过程。

#publish-mermaid-1785344016171-0{font-family:inherit;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785344016171-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344016171-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344016171-0 .error-icon{fill:#552222;}#publish-mermaid-1785344016171-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785344016171-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785344016171-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785344016171-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785344016171-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785344016171-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785344016171-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785344016171-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785344016171-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785344016171-0 svg{font-family:inherit;font-size:16px;}#publish-mermaid-1785344016171-0 p{margin:0;}#publish-mermaid-1785344016171-0 .label{font-family:inherit;color:#333;}#publish-mermaid-1785344016171-0 .cluster-label text{fill:#333;}#publish-mermaid-1785344016171-0 .cluster-label span{color:#333;}#publish-mermaid-1785344016171-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785344016171-0 .label text,#publish-mermaid-1785344016171-0 span{fill:#333;color:#333;}#publish-mermaid-1785344016171-0 .node rect,#publish-mermaid-1785344016171-0 .node circle,#publish-mermaid-1785344016171-0 .node ellipse,#publish-mermaid-1785344016171-0 .node polygon,#publish-mermaid-1785344016171-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344016171-0 .rough-node .label text,#publish-mermaid-1785344016171-0 .node .label text,#publish-mermaid-1785344016171-0 .image-shape .label,#publish-mermaid-1785344016171-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785344016171-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785344016171-0 .rough-node .label,#publish-mermaid-1785344016171-0 .node .label,#publish-mermaid-1785344016171-0 .image-shape .label,#publish-mermaid-1785344016171-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785344016171-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785344016171-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785344016171-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785344016171-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785344016171-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785344016171-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344016171-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785344016171-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344016171-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785344016171-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785344016171-0 .cluster text{fill:#333;}#publish-mermaid-1785344016171-0 .cluster span{color:#333;}#publish-mermaid-1785344016171-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:inherit;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785344016171-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785344016171-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785344016171-0 .icon-shape,#publish-mermaid-1785344016171-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344016171-0 .icon-shape p,#publish-mermaid-1785344016171-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785344016171-0 .icon-shape .label rect,#publish-mermaid-1785344016171-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344016171-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785344016171-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785344016171-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785344016171-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344016171-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344016171-0 :root{–mermaid-font-family:inherit;}

实例初始化前

数据观测/初始化事件

模板编译/虚拟 DOM 生成

DOM 插入/挂载

updated

1.2 created 钩子与 DOM 的状态

在 created 钩子中，Vue 实例已经创建完成。此时数据（data）已经进行了观测，计算属性也已经初始化。但是，实例尚未完成模板编译。这意味着实例的 $el 属性为 undefined。在这个阶段，我们无法访问到真实的 DOM 元素，也不能操作样式或执行查询操作。Created 钩子主要用于执行一些非 DOM 相关的逻辑，例如初始化数据、调用异步请求等。

1.3 beforeMount 钩子与 DOM 的状态

当进入 beforeMount 钩子时，模板编译已经完成。Vue 内部生成了虚拟 DOM（VNode）。但是，虚拟 DOM 还没有被挂载到真实的 DOM 节点上。此时，DOM 树依然是空的，页面上还没有显示任何内容。BeforeMount 钩子主要用于在挂载前做一些准备工作，例如修改配置项等。

1.4 mounted 钩子：DOM 渲染完成的标志

当我们进入 mounted 钩子时，Vue 已经完成了 DOM 的挂载。也就是说，Vue 在内存中构建的虚拟 DOM 节点已经被挂载到了真实的 DOM 树上。此时，我们可以通过 this.$el 访问到真实的 DOM 节点，也可以通过 ref 引用组件内部的元素，并执行相关的 DOM 操作或获取计算后的样式值。因此，所有涉及 DOM 操作的代码都必须放在 mounted 中，或者是 nextTick 回调中。

1.5 代码示例验证

在下面的示例中，我们将对比 created 和 mounted 阶段对 DOM 的访问能力，这有助于理解两者的区别。

<div id="app">
<h1 ref="titleText">Hello Vue</h1>
</div>
export default {
data() {
return { count: 0 };
},
mounted() {
// mounted 钩子中可以正常获取 DOM
console.log(this.$refs.titleText.innerText);
// 此时 DOM 已经渲染完成，可以操作样式
this.$refs.titleText.style.color = "red";
},
created() {
// created 钩子中无法获取 DOM
// console.log(this.$refs.titleText); // 报错或为 undefined
}
};

1.6 总结

综上所述，DOM 渲染完成是在 mounted 钩子中。在 created 和 beforeMount 阶段，Vue 仅完成了数据的初始化和虚拟 DOM 的构建，但并未将 DOM 插入到页面中。因此，任何对 DOM 元素的操作都需要在 mounted 钩子中执行，以确保获取到的元素是真实存在于页面上的。