Vue 中模板编译的过程（源码分析）

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue中模板编译的过程（从源码的角度）。每天进步一点点。
一、图解：

二、文字解释：

1、模板编译的入口函数 compileToFunctions；

2、在 compileToFunctions 函数中，首先判断缓存是否存在编译好的render函数，如果存在直接返回，如果不存在调用 compile 函数开始进行模板编译；

3、在compile 函数中，首先合并选项，将编译过程中遇到的一些错误、警告和提示存储起来，然后调用 baseCompile 函数进行模板编译；

4、在 baseCompile 函数中，首先调用 parse 方法，将html模板转换为AST抽象语法树；然后调用 optimize 方法，对抽象语法树进行优化（标记静态节点，静态根节点，重新渲染的时候不需要再处理静态根节点，它的内容不会改变）；最后调用generate 方法，将优化后的抽象语法树转换为字符串形式的js代码。

5、返回到compile 方法中，将存储的错误信息和提示挂载到 compiled 对象并返回；

6、再回到 compileToFunctions 中，调用 createFunction 方法将 compiled 中字符串形式的js代码转化为 render函数，缓存并返回；

7、最后将编译好的render函数挂载到Vue实例的options选项对应的render属性中。

至此，模板编译过程结束，开始调用mount函数渲染DOM。