JS每日一题：简述一下Vue.js的template编译过程？

20190215问简述一下Vue.js的template编译过程？先上一张图大致看一下整个流程从上图中我们可以看到compile是从mount后开始进行中, 整体逻辑分为三个部分解析器(parse) - 将 模板字符串 转换成 element ASTs优化器(optimize) - 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化代码生成器(generate) - 使用 element ASTs 生成 render 函数代码字符串开始前先解释一下ASTAST(abstract syntax tree 抽象语法树), 是源代码的抽象语法结构的树状表现形式从代码上简单理解一下<div class=“name”>JS每日一题</div>//转成AST后会得到如下格式[ { “type”: “tag”, “name”: “div”, “attribs”: { “class”: “name” }, “children”: [ { “data”: “JS每日一题”, “type”: “text”, “next”: null, “startIndex”: 18, “prev”: null, “parent”: “[Circular ~.0]”, “endIndex”: 24 } ], “next”: null, “startIndex”: 0, “prev”: null, “parent”: null, “endIndex”: 30 }]AST会经过generate得到render函数，render的返回值是VNode, VNode的源码可以见 https://github.com/vuejs/vue/...#### 解析器(parse)源码地址 https://github.com/vuejs/vue/… parse 的目标是把 template 模板字符串转换成 AST 树，它是一种用 JavaScript 对象的形式来描述整个模板。那么整个 parse 的过程是利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的优化器(optimize)源码地址 https://github.com/vuejs/vue/…通过 optimize 把整个 AST 树中的每一个 AST 元素节点标记了 static 和 staticRoot, optimize 的过程，就是深度遍历这个 AST 树，去检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 DOM 永远不需要改变代码生成器(generate)源码地址 https://github.com/vuejs/vue/… 把优化后的 AST 树转换成可执行的代码总结首先通过parse将template解析成AST,其次optimize对解析出来的AST进行标记，最后generate将优化后的AST转换成可执行的代码关于JS每日一题JS每日一题可以看成是一个语音答题社区 每天利用碎片时间采用60秒内的语音形式来完成当天的考题 群主在次日0点推送当天的参考答案注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路点击加入答题