脚本宝典收集整理的这篇文章主要介绍了JS每日一题:简述一下Vue.js的template编译过程?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
简述一下Vue.js的template编译过程?
先上一张图大致看一下整个流程
从上图中我们可以看到compile是从mount后开始进行中, 整体逻辑分为三个部分
模板字符串
转换成 element ASTs
AST
进行静态节点标记,主要用来做虚拟DOM的渲染优化element ASTs
生成 render
函数代码字符串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 树的目的
源码地址 https://github.com/vuejs/vue/...
通过 optimize 把整个 AST 树中的每一个 AST 元素节点标记了 static 和 staticRoot, optimize 的过程,就是深度遍历这个 AST 树,去检测它的每一颗子树是不是静态节点,如果是静态节点则它们生成 DOM 永远不需要改变
源码地址
https://github.com/vuejs/vue/...
把优化后的 AST 树转换成可执行的代码
首先通过parse将template解析成AST,其次optimize对解析出来的AST进行标记,最后generate将优化后的AST转换成可执行的代码
JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案
以上是脚本宝典为你收集整理的JS每日一题:简述一下Vue.js的template编译过程?全部内容,希望文章能够帮你解决JS每日一题:简述一下Vue.js的template编译过程?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。