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 的定义：