Vue源码解析第10篇：编译器如何构建渲染函数？

本文共计6851个文字，预计阅读时间需要28分钟。

深入了解渲染函数的生成过程，理解编译器如何将AST转换为运行时代码，以及我们编写的类和模板最终变成了什么。前言：本文是Vue编译器的最后一部分，前两部分分别介绍了如何将AST转换为运行时代码，以及如何处理模板。

深入理解渲染函数的生成过程，理解编译器是如何将 AST 变成运行时的代码，也就是我们写的类 html 模版最终变成了什么？ 前言

这篇文章是 Vue 编译器的最后一部分，前两部分分别是：Vue 源码解读（8）—— 编译器 之 解析、Vue 源码解读（9）—— 编译器 之 优化。

从 HTML 模版字符串开始，解析所有标签以及标签上的各个属性，得到 AST 语法树，然后基于 AST 语法树进行静态标记，首先标记每个节点是否为静态静态，然后进一步标记出静态根节点。这样在后续的更新中就可以跳过这些静态根节点的更新，从而提高性能。

这最后一部分讲的是如何从 AST 生成渲染函数。