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

栏目: 编程语言 · 发布时间: 5年前

内容简介:简述一下Vue.js的template编译过程?先上一张图大致看一下整个流程

20190215问

简述一下Vue.js的template编译过程?

先上一张图大致看一下整个流程

JS每日一题:简述一下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)

把优化后的 AST 树转换成可执行的代码

总结

首先通过parse将template解析成AST,其次optimize对解析出来的AST进行标记,最后generate将优化后的AST转换成可执行的代码

关于JS每日一题

JS每日一题可以看成是一个语音答题社区

每天利用碎片时间采用60秒内的语音形式来完成当天的考题

群主在次日0点推送当天的参考答案

  • 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路

点击加入答题


以上所述就是小编给大家介绍的《JS每日一题:简述一下Vue.js的template编译过程?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms for Image Processing and Computer Vision

Algorithms for Image Processing and Computer Vision

Parker, J. R. / 2010-12 / 687.00元

A cookbook of algorithms for common image processing applications Thanks to advances in computer hardware and software, algorithms have been developed that support sophisticated image processing with......一起来看看 《Algorithms for Image Processing and Computer Vision》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具