vue编译后可以反编译（vuejs反编译）



Vue 的编译过程总共分为三个步骤：

1. 根据 template 生成 AST（抽象语法树）
2. 优化 AST
3. 根据 AST 可执行的函数（render 函数之类的）

这三个步骤其实在源码中，也写的清清楚楚。

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 方法中，其实比较特殊的就是判断子节点只有一个的情况，这种情况下，它的子节点不能为纯文本节点（这一点可能是作者做过什么性能测试什么的，所以注释中也写了这样要求获得的会比消耗的性能多）

会 generate 成这样的可执行的函数：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/35704.html