了解Vue的编译过程吗？

如果你使用过框架做项目的话，这个问题即使之前没有看过应该也能答出个大概。

首先直接把vue模板丢到浏览器中肯定是不能运行的，模板只是为了方便开发者进行开发。vue会通过编译器将模板通过几个阶段最终编译为render函数，然后通过执行render函数生成Vitual DOM最终映射为真实的DOM。

1. 将模板解析为抽象语法树（AST）
2. 优化AST
3. 将AST转换为render函数

面试答以上内容即可，接下来是分析阶段：

在第一阶段，最主要的事情还是通过各种各样的正则表达式去匹配模板中的内容，然后将内容提取出来做各种逻辑操作，接下来会生成一个最基本的AST对象。

{
    // 类型
    type: 1,
    // 标签
    tag,
    // 属性列表
    attrsList: attrs,
    // 属性映射
    attrsMap: makeAttrsMap(attrs),
    // 父节点
    parent,
    // 子节点
    children: []
}

然后会根据这个最基本的AST对象中的属性，进一步扩展AST。

当然在这一阶段中，还会进行其他的一些判断逻辑。比如说对比前后开闭标签是否一致，判断根组件是否只存在一个，判断是否符合HTML5 Content Model规范等问题。

接下来就是优化AST的阶段。在当前版本下，Vue进行的优化内容其实还是不多的，只是对节点进行了静态内容提取，也就是将永远不会变动的节点提取了出来，实现复用Virtual DOM，跳过对比算法的功能。在下一个版本中，Vue会在优化AST的阶段继续发力，实现更多的优化功能，尽可能的在编译阶段压榨更多的性能，比如说提取静态的属性等等优化行为。

最后一个阶段就是通过AST生成render函数了。其实这一阶段虽然分支有很多，但是最主要的目的就是遍历整个AST，根据不同的条件生成不同的代码罢了。