# vue源码 - 编译器之生成渲染函数
这篇文章是 Vue 编译器的最后一部分
从 HTML 模版字符串开始，解析所有标签以及标签上的各个属性，得到 AST 语法树，然后基于 AST 语法树进行静态标记，首先标记每个节点是否为静态静态，然后进一步标记出静态根节点。这样在后续的更新中就可以跳过这些静态根节点的更新，从而提高性能。 这最后一部分讲的是如何从 AST 生成渲染函数。
目标：深入理解渲染函数的生成过程，理解编译器是如何将 AST 变成运行时的代码，也就是我们写的类 html 模版最终变成了什么？
其余章节更新中...
# 总结
- 详细说一下渲染函数的生成过程
大家一说到渲染函数，基本上说的就是 render 函数，其实编译器生成的渲染有两类：
- 第一类就是一个 render 函数，负责生成动态节点的 vnode
- 第二类是放在一个叫 staticRenderFns 数组中的静态渲染函数，这些函数负责生成静态节点的 vnode
渲染函数生成的过程，其实就是在遍历 AST 节点，通过递归的方式，处理每个节点，最后生成形如：_c(tag, attr, children, normalizationType) 的结果。tag 是标签名，attr 是属性对象，children 是子节点组成的数组，其中每个元素的格式都是 _c(tag, attr, children, normalizationTYpe) 的形式，normalization 表示节点的规范化类型，是一个数字 0、1、2，不重要。
在处理 AST 节点过程中需要大家重点关注也是面试中常见的问题有：
- 静态节点是怎么处理的
静态节点的处理分为两步：
- 将生成静态节点 vnode 函数放到 staticRenderFns 数组中
- 返回一个 _m(idx) 的可执行函数，意思是执行 staticRenderFns 数组中下标为 idx 的函数，生成静态节点的 vnode
- v-once、v-if、v-for、组件 等都是怎么处理的
- 单纯的 v-once 节点处理方式和静态节点一致
- v-if 节点的处理结果是一个三元表达式
- v-for 节点的处理结果是可执行的 _l 函数，该函数负责生成 v-for 节点的 vnode
- 组件的处理结果和普通元素一样，得到的是形如 _c(compName) 的可执行代码，生成组件的 vnode
# 参考
https://juejin.cn/post/6961545472204865572