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

一、DOM 渲染完成时机的深度解析1.1 生命周期的总体流程Vue 的生命周期是指一个 Vue 实例从创建开始到销毁的整个过程。在数据驱动的前端开发中理解每个阶段对 DOM 的影响至关重要。为了直观地理解 DOM 渲染完成的时间点我们可以通过以下流程图来查看组件初始化到挂载的过程。实例初始化前数据观测/初始化事件模板编译/虚拟 DOM 生成DOM 插入/挂载updated1.2 created 钩子与 DOM 的状态在 created 钩子中Vue 实例已经创建完成。此时数据data已经进行了观测计算属性也已经初始化。但是实例尚未完成模板编译。这意味着实例的 $el 属性为 undefined。在这个阶段我们无法访问到真实的 DOM 元素也不能操作样式或执行查询操作。Created 钩子主要用于执行一些非 DOM 相关的逻辑例如初始化数据、调用异步请求等。1.3 beforeMount 钩子与 DOM 的状态当进入 beforeMount 钩子时模板编译已经完成。Vue 内部生成了虚拟 DOMVNode。但是虚拟 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 idapp h1 reftitleTextHello Vue/h1 /divexport 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 钩子中执行以确保获取到的元素是真实存在于页面上的。