代码生成器的核心任务是将抽象语法树(AST)转化为可执行的渲染函数代码。其输出是一段字符串形式的 JavaScript 代码,最终通过 with 包裹生成渲染函数。该函数执行后返回虚拟节点(VNode),用于驱动虚拟 DOM 渲染真实视图。
生成过程基于 AST 的深度优先遍历,对不同类型的节点调用对应的代码生成函数。主要节点类型包括:元素、文本和注释。
元素节点:生成 _c(tag, data, children) 形式的调用,其中 _c 是 createElement 的别名。data 由 genData 构建,若无属性则标记为 plain;children 通过 genChildren 遍历子节点递归生成,每项根据类型拼接。
文本节点:静态文本使用 _v(JSON.stringify(text)),动态绑定则插入表达式结果。
注释节点:生成 _e(commentText) 调用,与文本处理类似。
整个过程采用递归下降方式,从根节点出发,逐层生成函数调用字符串,最终组合成完整的渲染函数体。
生成过程基于 AST 的深度优先遍历,对不同类型的节点调用对应的代码生成函数。主要节点类型包括:元素、文本和注释。
元素节点:生成 _c(tag, data, children) 形式的调用,其中 _c 是 createElement 的别名。data 由 genData 构建,若无属性则标记为 plain;children 通过 genChildren 遍历子节点递归生成,每项根据类型拼接。
文本节点:静态文本使用 _v(JSON.stringify(text)),动态绑定则插入表达式结果。
注释节点:生成 _e(commentText) 调用,与文本处理类似。
整个过程采用递归下降方式,从根节点出发,逐层生成函数调用字符串,最终组合成完整的渲染函数体。









