【Vue】vue，AST，render，virtual dom的关系？

众所周知，浏览器只能识别html，js，css。所以要识别vue文件，vue compiler做了几件事，先把template中的代码转换成AST抽象语法树，然后再把AST抽象语法树转换成render函数。接着执行render函数会生成virtual dom(虚拟Dom)，最后渲染到真实的Dom上。

举个通俗的例子，一个vue文件就是一个剧本，导演(vue compiler)翻看剧本，然后整理出整个剧本的人物关系，场景，戏份(转换成AST)。下一步导演要排戏，比如场景1是演员1和演员2要在一个雨天用跳舞的方式battle。场景二是演员1和演员3在学校的阳台说倒立眼泪就不会流下来。场景三是…，这个过程就是导演生成表演剧本(render)的过程即vue compiler根据AST生成render函数。有了表演剧本，演员们就可以进行彩排(virtual dom)了，这个过程就是生成虚拟节点。等演员准备好开拍了，就是virtual Dom渲染到真实的DOM上，后续要改台词，改戏，改演员，都是局部修改(不需要换掉整个剧组)，然后再根据最新彩排实拍。

这里只是一个简单的比喻，帮助更好理解他们之间的关系，具体是怎么实现的，可以再深入研究。(我是不去研究了，大概知道长啥样为啥这样做就行了)