vue生命周期 —— 模板编译

Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢？

在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile 这个方法来将 template 里的内容转换成真正的 HTML 代码。complie 之后执行的事情也蛮重要的，这个我们留到最后再说。complie 最终生成 render 函数，等待调用。这个方法分为三步：

• parse 函数解析 template
• optimize 函数优化静态内容
• generate 函数创建 render 函数字符串

parse 解析

在了解 parse 的过程之前，我们需要了解 AST，AST 的全称是 Abstract Syntax Tree，也就是所谓抽象语法树，用来表示代码的数据结构。在 Vue 中我把它理解为嵌套的、携带标签名、属性和父子关系的 JS 对象，以树来表现 DOM 结构。

下面是 Vue 里的 AST 的定义：

我们可以看到 AST 有三种类型，并且通过 children 这个字段层层嵌套形成了树状的结构。而每一个 AST 节点存放的就是我们的 HTML 元素、插值表达式或文本内容。AST 正是