Vue.js渲染过程之从Template模板到VNode的转化路径-Vue.js-PHP中文网

Vue模板渲染核心是模板→AST→渲染函数→VNode的四阶段流水线：先解析模板为静态AST树，再编译为可执行render函数，执行后生成含type/props/children等字段的VNode对象树。

vue.js渲染过程之从template模板到vnode的转化路径

Vue.js 的模板渲染过程，核心是将开发者编写的字符串（或 DOM 模板）逐步解析、编译为可执行的 JavaScript 对象——即 VNode（虚拟节点），最终由 patch 算法驱动真实 DOM 更新。这个转化不是一步到位，而是分阶段、有明确职责的流水线。

模板字符串 → AST 抽象语法树

Vue 在编译阶段（运行时编译或构建时预编译）首先对模板进行词法分析和语法分析，生成一棵结构化的 AST 节点树。每个 AST 节点描述了模板中一个语法单元：比如元素节点（div）、文本节点（{{ msg }}）、指令（v-if、v-for）、属性（:id）、插槽等。

关键点：

AST 不含运行时逻辑，纯静态结构，便于后续优化（如静态提升、hoist 静态节点）
模板中的 Mustache 表达式（{{ }}）会被解析为 expression 字段，保留原始字符串以便后续生成渲染函数时调用 with(this){...} 或作用域插值
指令和绑定属性被提取并挂载到对应 AST 节点的 directives 或 attrsList/attrsMap 中

AST → 渲染函数（Render Function）

接下来，Vue 的编译器遍历 AST，递归地将其转换为可执行的 JavaScript 函数体代码（字符串），再通过 new Function() 动态生成渲染函数（render）。这个函数在组件实例化后被调用，返回 VNode。

例如：

{{ text }}

会生成类似这样的渲染函数片段：

h('div', { id: 'app', class: this.cls }, [this.text])

其中 h 是 createElement 的别名（Vue 3 中为 h()，Vue 2 中常为 vm.$createElement）。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

注意：

模板编译只发生在首次（或热更新时），生成的 render 函数会被缓存，避免重复解析
使用单文件组件（.vue）时，默认由 @vue/compiler-sfc 编译；若手写 render 函数，则跳过此步
Vue 3 的编译器更激进地做静态分析，比如自动将纯静态节点标记为 isStatic，并在生成 VNode 时复用（cloneVNode）以减少创建开销

渲染函数执行 → VNode 对象树

当组件首次挂载或响应式数据变化触发更新时，Vue 会执行 render() 函数。该函数内部调用 h()（或 createElement），按参数逐层构造标准的 VNode 对象：

type：标识类型（字符串表示原生标签，组件对象表示自定义组件，Fragment / Teleport 等特殊类型）
props：归一化后的属性对象（含事件、指令钩子、class/style 合并结果）
children：子节点数组，可能是字符串（文本）、VNode、或 undefined/空数组
key、ref、scopeId 等用于 diff 和生命周期管理的元信息

此时得到的是一棵内存中的轻量级对象树，与真实 DOM 完全解耦，具备跨平台能力（如服务端渲染、小程序适配）。

VNode → 真实 DOM（补充说明）

虽然问题聚焦“到 VNode”，但需明确：VNode 本身不操作 DOM。它交由 Vue 的 renderer（渲染器）模块处理。在浏览器环境中，renderer 的 patch 函数对比新旧 VNode 树（Diff 算法），最小化地增删改真实 DOM 节点，并同步更新组件实例的 $el 引用。

这一阶段属于“VNode 的消费”，而非“生成”，但它是整个路径闭环的关键落点。