20190215 问
简述一下 Vue.js 的 template 编译过程？
先上一张图大致看一下整个流程
从上图中我们可以看到 compile 是从 mount 后开始进行中, 整体逻辑分为三个部分
解析器 (parse) – 将 模板字符串 转换成 element ASTs
优化器 (optimize) – 对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化
代码生成器 (generate) – 使用 element ASTs 生成 render 函数代码字符串
开始前先解释一下 AST
AST(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 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题