Vue 的编译过程总共分为三个步骤：
- 根据 template 生成 AST（抽象语法树）
- 优化 AST
- 根据 AST 可执行的函数（render 函数之类的）
这三个步骤其实在源码中，也写的清清楚楚。
在 Vue 编译过程中，第一件做的事就是将 template 解析成 AST（抽象语法树，Abstract Syntax tree）。
Vue 中定义的 AST：
PS：其实在 optimize 之后 AST 上还会多出两个属性 static、staticRoot，这个在之后说到 optimize 的时候会提及这两个属性的由来。
而在 Vue 中将 template 生成 AST，则是通过 parse 这个方法。
在生成 template 对应的 AST 后，会对 AST 进行优化，即遍历 AST 树，对每个 AST 元素进行判断，是否为静态 AST 或 静态 AST Root，为之后的 patch 过程提供依据。
在 Vue 编译过程给 AST 添加 static 或 staitcRoot，则是通过 optimize 这个方法。
markStatic
其中 isStatic 会对节点进行一些基础的判断，返回 true or false。
markStaticRoot
在 makeStaticRoots 方法中，其实比较特殊的就是判断子节点只有一个的情况，这种情况下，它的子节点不能为纯文本节点（这一点可能是作者做过什么性能测试什么的，所以注释中也写了这样要求获得的会比消耗的性能多）
编译的最后一步，遍历 AST，将优化后的 AST 生成可执行的代码，例如生成 _c、_l、_v 之类的函数。
例如：
会 generate 成这样的可执行的函数：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/17860.html