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

NicolasHe 发布于2019-08-23 15:16 / 377人阅读

摘要：问简述一下的编译过程先上一张图大致看一下整个流程从上图中我们可以看到是从后开始进行中整体逻辑分为三个部分解析器将模板字符串转换成优化器对进行静态节点标记，主要用来做虚拟的渲染优化代码生成器使用生成函数代码字符串开始前先解释一下抽象

20190215问

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

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

从上图中我们可以看到compile是从mount后开始进行中, 整体逻辑分为三个部分

解析器(parse) - 将 模板字符串 转换成 element ASTs

优化器(optimize) - 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化

代码生成器(generate) - 使用 element ASTs 生成 render 函数代码字符串

开始前先解释一下AST

AST(abstract syntax tree 抽象语法树), 是源代码的抽象语法结构的树状表现形式

从代码上简单理解一下

JS每日一题
//转成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点推送当天的参考答案

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

点击加入答题

云服务器 GPU云服务器简述入侵检测的过程语言的编译过程 Vue.js vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101786.html

JS每日一题: 请简述一下vuex实现原理

摘要：给的实例注入一个的属性，这也就是为什么我们在的组件中可以通过访问到的各种数据和状态源码位置，是怎么实现的源码位置是对的的初始化，它接受个参数，为当前实例，为的，为执行的回调函数，为当前模块的路径。 20190221 请简述一下vuex实现原理对vuex基础概念有不懂的可以点这里 vuex实现原理我们简单过一遍源码地址 https://github.com/vuejs/vuex 首...

JohnLui 2019-08-23 15:25 评论0 收藏0
JS每日一题:Webpack有哪些常见的Plugin？他们是解决什么问题的

摘要：期有哪些常见的他们是解决什么问题的定义音译过来就是插件在中插件目的在于解决无法实现的其他事插件是一个具有属性的对象。 20190327期 Webpack有哪些常见的Plugin？他们是解决什么问题的定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事 webpack 插件是一个具有 apply 属性的 JavaScript 对象。appl...

songze 2019-08-23 16:31 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0