原理:
Vue 中的模版 template 无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的 HTML 语法,所以需要将 template 转化成一个 JS 函数,这样浏览器就可以执行这个函数并渲染出对应的 HTML 元素,就可以试图跑起来,这个转化过程是模版编译。
模版编译分为三个阶段:解析 Parse 、优化 Optimize、生成 Genertate,最终生成可执行函数 Render。
-
解析阶段:使用大量的正则表达式对 template 字符串进行解析,将标签、指令、属性等转化为抽象语法树 AST。
-
优化阶段:遍历 AST,找到其中的一些静态节点进行标记,方便在页面渲染时&进行Diff比较时,直接跳过这些静态节点,优化 Runtime 性能。
-
生成阶段:将最终的 AST 转化成 Render 函数字符串。