面试题-006- vue 模板编译的原理

vue 中模板 template 无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的 html 语法，所以需要将 template 转换成一个 JavaScript 函数，这样浏览器就可以执行这一个函数并渲染出对应的 html 元素，就可以让视图跑起来了，这个过程就叫做模板编译。

模板编译分为三个阶段：解析 parse、优化 optimize、生成 generate ，最终生成可执行函数 render

1. 解析阶段：使用大量的正则表达式对 template 字符串进行解析，将标签，指令，属性等转化为抽象语法树 AST
2. 优化阶段：遍历 AST ，找到其中的一些静态节点进行标记，方便在页面重渲染的时候进行 diff 比较时，直接跳到这些静态节点，优化 runtime 的性能
3. 生成阶段：将最终的 AST 转化为 render 函数字符串

 

AST ： 英文全称 Abstract Syntax Tree