Vue 模板编译原理：从模板到渲染函数-Vue.js-PHP中文网

vue模板编译核心是将html-like模板字符串静态编译为返回虚拟dom的render函数，分三步：解析为ast、静态标记优化、生成render函数；复杂表达式应移至计算属性以保障响应式与性能。

vue 模板编译原理：从模板到渲染函数

Vue 模板编译的核心，是把我们写的 HTML-like 模板字符串，变成一个能返回虚拟 DOM 的 JavaScript 函数（即 render 函数）。这个过程不是运行时解释执行，而是在构建阶段或首次加载时完成的静态转换，直接决定了后续渲染的效率和响应性。

解析：模板 → 抽象语法树（AST）

编译第一步是解析。Vue 会逐字符扫描模板字符串，进行词法分析（拆出标签、属性、插值、指令等 tokens），再做语法分析，构建成一棵结构化的 AST 对象。比如 <div :class="cls">{{ msg }}</div> 会被解析为包含 tag、props、children 等字段的嵌套对象，其中插值 {{ msg }} 被识别为 type=2 的文本插值节点，:class 被转为 binding 类型的指令节点。

Vue 2 使用 vue-template-compiler 内置的正则解析器；Vue 3 则基于更健壮的递归下降解析器，位于 @vue/compiler-core 包中
解析阶段不涉及任何数据，纯文本到树结构的映射，因此可离线预编译
遇到语法错误（如未闭合标签、非法指令）会在此阶段抛出明确提示

优化：标记静态节点，提升 diff 效率

第二步是对 AST 进行静态分析。编译器遍历整棵树，判断哪些节点的内容永远不会变（比如纯文本、没有绑定的元素），并打上 static 或 staticRoot 标记。这些节点在后续 patch 过程中可跳过比对，直接复用旧 vnode。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

静态节点包括：不含插值/指令的普通标签、纯文本子节点、静态 class/style 属性等
动态节点如 v-if、v-for、含表达式的 :class 或 {{ count + 1 }}，会被保留为运行时逻辑
Vue 3 进一步引入“hoist”机制，将静态 vnode 提前生成并缓存，避免每次 render 重复创建

代码生成：AST → 渲染函数（render）

最后一步是把优化后的 AST 转成可执行的 JavaScript 函数体。它本质是一段字符串拼接或模板字符串生成的代码，最终包裹成 function render() { return h(...) } 形式。其中 h 是 createElement 的别名，用于创建 vnode。

生成器按 AST 节点类型输出对应 h() 调用：标签节点 → h('div', ...)，文本插值 → h('p', [createTextVNode(_ctx.msg)])
指令（如 v-model）被编译为属性+事件组合，例如 modelValue 和 onUpdate:modelValue
Vue 3 的生成器支持 Composition API 语境，自动注入 _ctx（上下文）、_push（SSR 流式渲染）等内部变量

为什么不能在模板里写复杂表达式？

因为编译器无法静态判定其依赖关系，也就无法标记为静态或做依赖追踪。像 {{ items.filter(i => i.visible).map(i => i.name).join(', ') }} 这类表达式，每次 render 都要重新执行，且无法被响应式系统精确监听——它可能读取了未声明为 reactive 的属性，或触发不必要的更新。