Vue中的template不能直接被浏览器解析，需要经过模板编译过程，包括解析、优化和生成阶段，将template转化为JavaScript render函数。解析阶段使用正则解析AST，优化阶段标记静态节点提升性能，生成阶段AST转为render字符串。模板编译是Vue实现数据绑定和响应式的关键步骤。
vue 中模板 template 无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的 html 语法，所以需要将 template 转换成一个 JavaScript 函数，这样浏览器就可以执行这一个函数并渲染出对应的 html 元素，就可以让视图跑起来了，这个过程就叫做模板编译。
模板编译分为三个阶段：解析 parse、优化 optimize、生成 generate ，最终生成可执行函数 render
- 解析阶段：使用大量的正则表达式对 template 字符串进行解析，将标签，指令，属性等转化为抽象语法树 AST
- 优化阶段：遍历 AST ，找到其中的一些静态节点进行标记，方便在页面重渲染的时候进行 diff 比较时，直接跳到这些静态节点，优化 runtime 的性能
- 生成阶段：将最终的 AST 转化为 render 函数字符串
AST ： 英文全称 Abstract Syntax Tree
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
