vue 什么时候开始渲染dom节点

Vue在何时开始渲染DOM节点？

Vue在创建Vue实例时会经历一系列的初始化过程，其中包括编译模板、创建虚拟DOM、挂载虚拟DOM等步骤。具体来说，Vue开始渲染DOM节点的时机可以分为以下几个阶段：

1. 编译模板：在创建Vue实例时，Vue会对模板进行编译，将模板转换成渲染函数。这个过程包括将模板解析成AST（抽象语法树），然后将AST编译成渲染函数。

2. 创建虚拟DOM：在编译模板之后，Vue会根据渲染函数创建一个虚拟DOM（Virtual DOM）树。虚拟DOM是一个轻量级的JavaScript对象，用来描述真实DOM的结构和属性。

3. 挂载虚拟DOM：在创建虚拟DOM之后，Vue会调用$mount方法将虚拟DOM挂载到真实的DOM节点上。这个过程会将虚拟DOM转化为真实的DOM节点，并将其插入到指定的位置。

总结起来，Vue开始渲染DOM节点的时机是在创建Vue实例后，经过模板编译、虚拟DOM创建和挂载的过程之后。这样Vue才能将数据渲染到真实的DOM节点上，实现视图的更新和响应式。

在Vue应用中，DOM节点的渲染是由Vue的虚拟DOM（Virtual DOM）以及Vue的响应式系统来完成的。具体来说，当Vue实例中的数据发生改变时，Vue会自动重新计算虚拟DOM并更新实际的DOM节点。

具体来说，以下是Vue渲染DOM节点的几个重要时刻：

1. 初始化阶段：当Vue实例第一次创建时，会先进行初始化阶段。在这个阶段，Vue会解析模板（template）或渲染函数（render function），创建虚拟DOM树。然后将虚拟DOM转化成真实的DOM节点，并进行页面渲染。

2. 数据改变时：当Vue实例中的响应式数据发生改变时，Vue会自动检测到数据变化，并触发重新计算虚拟DOM和更新DOM节点的过程。Vue使用了响应式系统来追踪依赖关系，以便在数据改变时能够精确地更新DOM节点。

3. 生命周期钩子函数：在Vue组件的生命周期中，有一些特定的钩子函数可以用于操作DOM节点。例如，created钩子函数在实例创建完成后被调用，此时虚拟DOM已经渲染成真实的DOM节点。可以在这个时候对DOM节点进行操作。

4. 指令（Directives）：Vue的指令是一种特殊的属性，可以在DOM上操作并绑定数据。指令可以用于直接操作DOM节点，例如v-bind指令可以用于动态绑定属性，v-on指令可以用于监听DOM事件，v-if和v-for指令可以用于根据条件和循环生成DOM节点等。指令的使用可以在编译和渲染过程中对DOM进行操作。

5. 异步更新队列：在某些情况下，Vue并不会立即更新DOM节点，而是将变更推迟到下一个事件循环中。例如，在同一个事件循环中多次修改数据，Vue会将这些修改合并后，一次性更新DOM节点，以提高性能。这种机制称为异步更新队列。

综上所述，Vue会在初始化阶段、数据改变时、生命周期钩子函数、指令和异步更新队列等时刻来渲染DOM节点。通过虚拟DOM和响应式系统的机制，Vue能够高效地完成DOM的更新和渲染。

Vue 在渲染 DOM 节点方面有两个阶段：编译阶段和挂载阶段。

1. 编译阶段：
   在编译阶段，Vue 将模板（Template）解析为渲染函数。这个渲染函数可以理解为一个可以生成虚拟 DOM 的函数。编译阶段主要包括以下几个步骤：

• 解析模板：Vue 会将模板解析为抽象语法树（AST）。
• 优化：对 AST 进行优化，如静态节点提升，检测不需要更新的节点等。
• 生成渲染函数：将优化后的 AST 转换为渲染函数。

2. 挂载阶段：
   在挂载阶段，Vue 将执行渲染函数，并把生成的虚拟 DOM 转换为真实的 DOM 并渲染到页面上。挂载阶段主要包括以下几个步骤：

• 创建 VNode：执行渲染函数，创建一个虚拟 DOM 树（VNode 树）。
• 标记：标记 VNode，将其与对应的真实 DOM 进行关联。
• 渲染：根据 VNode 的标记信息，创建真实的 DOM 节点，并将其插入到页面中。

综上所述，Vue 在编译阶段将模板解析为渲染函数，然后在挂载阶段执行渲染函数，生成虚拟 DOM 并渲染到页面上。所以，Vue 在挂载阶段开始渲染真实的 DOM 节点。