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编译过程?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

程序员面试金典(第5版)

程序员面试金典(第5版)

[美] Gayle Laakmann McDowell / 李琳骁、漆 犇 / 人民邮电出版社 / 2013-11 / 59.00

本书是原谷歌资深面试官的经验之作,层层紧扣程序员面试的每一个环节,全面而详尽地介绍了程序员应当如何应对面试,才能在面试中脱颖而出。第1~7 章主要涉及面试流程解析、面试官的幕后决策及可能提出的问题、面试前的准备工作、对面试结果的处理等内容;第8~9 章从数据结构、概念与算法、知识类问题和附加面试题4 个方面,为读者呈现了出自微软、苹果、谷歌等多家知名公司的150 道编程面试题,并针对每一道面试题目......一起来看看 《程序员面试金典(第5版)》 这本书的介绍吧!

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

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具