【vue】vue 是怎么把 template 模版编译成 render 函数的,什么是AST抽象语法树

news/2024/4/19 16:37:42/

什么是AST 抽象语法树

  1. 是一个对象/或者json
  2. 是一个数据结构
  3. AST通常是由多个节点组成的树状结构,每个节点代表一个语法单位或表达式。节点之间的关系通过父子关系或兄弟关系来表示程序的结构。在不同的编程语言和工具中,AST可能有不同的表示方式和节点类型。

  4. const ast = {type: "Program",body: [{type: "FunctionDeclaration",id: {type: "Identifier",name: "add"},params: [{type: "Identifier",name: "a"},{type: "Identifier",name: "b"}],body: {type: "BlockStatement",body: [{type: "ReturnStatement",argument: {type: "BinaryExpression",operator: "+",left: {type: "Identifier",name: "a"},right: {type: "Identifier",name: "b"}}}]}},{type: "VariableDeclaration",declarations: [{type: "VariableDeclarator",id: {type: "Identifier",name: "result"},init: {type: "CallExpression",callee: {type: "Identifier",name: "add"},arguments: [{type: "Literal",value: 2},{type: "Literal",value: 3}]}}],kind: "let"},{type: "ExpressionStatement",expression: {type: "CallExpression",callee: {type: "MemberExpression",object: {type: "Identifier",name: "console"},property: {type: "Identifier",name: "log"},computed: false},arguments: [{type: "Identifier",name: "result"}]}}],sourceType: "script"
    };console.log(ast);
    

抽象语法树(Abstract Syntax Tree,AST)是源代码的抽象语法结构的树状表示形式。它是编译器、解释器等程序中常用的一种数据结构,用于表示编程语言的语法结构,方便进行语法分析、语义分析以及代码转换等操作。

在编译器的工作流程中,源代码首先会被分词器(Tokenizer)或词法分析器(Lexer)处理,将代码分割成一个个的词法单元(Tokens)。接着,这些词法单元会被传递给语法分析器(Parser),语法分析器会根据语言的语法规则将这些词法单元组织成一个树状结构,这个结构就是抽象语法树。

抽象语法树的节点代表了源代码中的语法结构,例如表达式、语句、函数定义等。每个节点通常包含以下信息:

  1. 类型(Type):节点表示的语法结构的类型,例如表达式、函数声明等。
  2. 值(Value):节点对应的词法单元的值,例如变量名、操作符等。
  3. 子节点(Children):子节点表示了当前节点的子结构,它们可以是其他节点,这样就形成了树的分支。

通过遍历抽象语法树,编译器可以进行诸如优化、转换、生成目标代码等操作。在 JavaScript 生态系统中,许多工具(如 Babel、ESLint 等)都会使用 AST 来进行代码转换、静态分析等操作。在编程语言的学习和理解过程中,理解抽象语法树有助于深入理解语言的语法和结构。

vue 是怎么把 template 模版编译成 render 函数的

  1. 模板解析(Parsing):Vue 会先将模板字符串解析成抽象语法树(AST),这个过程由模板编译器完成。AST 是对模板结构的抽象表示,它描述了模板中各个元素的类型、属性、子节点等信息。

  2. 静态分析(Static Analysis):Vue 会对 AST 进行静态分析,识别出模板中的静态节点(Static Node)和动态节点(Dynamic Node)。静态节点是在编译阶段就可以确定其内容的节点,而动态节点的内容是在运行时确定的,比如包含变量或表达式的节点。

  3. 优化(Optimization):Vue 会对 AST 进行优化,主要是优化静态节点的生成和更新,以提升渲染性能。Vue 3 中引入了基于静态分析的优化策略,可以进一步提高渲染性能。

  4. 代码生成(Code Generation):根据优化后的 AST,Vue 将生成渲染函数的代码。这个过程会根据模板的结构和内容,生成一段 JavaScript 代码,这段代码负责将组件的数据状态映射到 DOM 元素上,并处理组件的更新和交互逻辑。

  5. 缓存(Caching):Vue 会对生成的渲染函数进行缓存,以提高性能。对于同一个模板,Vue 只会进行一次编译,并将编译结果缓存起来,在下次渲染相同模板时直接使用缓存的渲染函数,避免重复的编译过程。

总的来说,Vue 将模板编译成渲染函数的过程是一个将静态模板转换为动态渲染逻辑的过程,它包括模板解析、静态分析、优化和代码生成等步骤,最终生成一个渲染函数,用于渲染组件并处理组件的更新。


http://www.ppmy.cn/news/1365113.html

相关文章

【深度学习笔记】深度卷积神经网络——NiN

网络中的网络(NiN) LeNet、AlexNet和VGG都有一个共同的设计模式:通过一系列的卷积层与汇聚层来提取空间结构特征;然后通过全连接层对特征的表征进行处理。 AlexNet和VGG对LeNet的改进主要在于如何扩大和加深这两个模块。 或者&am…

FPGA 与 数字电路的关系 - 这篇文章 将 持续 更新 :)

先说几个逻辑:(强调一下在这篇文章 输入路数 只有 1个或2个,输出只有1个,N个输入M个输出以后再说) 看下面的几个图: 图一( 忘了 这是 啥门,不是门吧 :)也就…

Swagger接口文档管理工具

Swagger 1、Swagger1.1 swagger介绍1.2 项目集成swagger流程1.3 项目集成swagger 2、knife4j2.1 knife4j介绍2.2 项目集成knife4j 1、Swagger 1.1 swagger介绍 官网:https://swagger.io/ Swagger 是一个规范和完整的Web API框架,用于生成、描述、调用和…

Day03:Web架构OSS存储负载均衡CDN加速反向代理WAF防护

目录 WAF CDN OSS 反向代理 负载均衡 思维导图 章节知识点: 应用架构:Web/APP/云应用/三方服务/负载均衡等 安全产品:CDN/WAF/IDS/IPS/蜜罐/防火墙/杀毒等 渗透命令:文件上传下载/端口服务/Shell反弹等 抓包技术&#xff1a…

迭代器模式(Iterator Pattern)

定义 迭代器模式(Iterator Pattern)是一种行为型设计模式,它提供了一种方法来顺序访问聚合对象中的各个元素,而不需要暴露该对象的内部表示。迭代器模式使得客户端代码能够独立于聚合对象的具体实现进行遍历操作。 在迭代器模式…

SD-WAN技术:优化国内外服务器访问的关键

在全球化的商业环境中,企业经常需要在国内访问国外的服务器。然而,由于地理位置和网络架构的限制,这种跨国访问往往会遇到速度慢、延迟高等问题。SD-WAN(软件定义广域网)技术的兴起,为企业提供了一种新的解…

sql 分割字段,并分行

创建测试表格 CREATE TABLE test (id INT PRIMARY KEY, data VARCHAR(100)); INSERT INTO test VALUES (1, A,B,C); INSERT INTO test VALUES (2, D,E,F,G);查询并分割字段 SELECT id, value AS split_data FROM test CROSS APPLY STRING_SPLIT(data, ,) WHERE LEN(value) …

10:00面试,10:05就出来了,问的问题过于变态了。。。

我从一家小公司转投到另一家公司,期待着新的工作环境和机会。然而,新公司的加班文化让我有些始料未及。虽然薪资相对较高,但长时间的工作和缺乏休息使我身心俱疲。 就在我逐渐适应这种高强度的工作节奏时,公司突然宣布了一则令人…

了解 Go 中原子操作的重要性与使用方法

引言 并发是现代软件开发的一个基本方面,而在 Go 中编写并发程序相对来说是一个相对轻松的任务,这要归功于其强大的并发支持。 Go 提供了对原子操作的内置支持,这在同步并发程序中起着至关重要的作用。在本篇博客文章中,我们将探…

最新红盟云卡个人自动发卡开源系统源码优化版

红盟云卡系统是云商学院旗下的一款基于 PHPMySQL 开发的虚拟商品在线售卖平台。它是一款漂亮且功能丰富的发卡网站,可以与社区进行对接。该系统完全开源且无任何加密,可商业使用,并支持个人免签多个接口。 下载地址:优化版.zip

七、ChatGPT为什么会被热炒?

2023年上半年,ChatGPT引起了广泛的热议,对于ChatGPT有多热,不需要我重复了,你可能在网上看到了很多报道,标题如《ChatGPT揭开AI战幔:杀死黄页一样摧毁Google?》和《ChatGPT强势来袭,…

vscode右键菜单栏功能说明

本文主要介绍在vscode中的python代码文件中,单击鼠标右键出现的菜单栏功能。部分功能可能与安装插件相关,主要用于个人查阅。 单击右键菜单栏如下: GO to xx类型命令 “Go to Definition”、“Go to Declaration”、"Go to Type Defin…

python_pyecharts_柱形图

from pyecharts.charts import Bar from pyecharts import options as opts # 创建一个柱形图实例 bar Bar() # 设置x轴数据 bar.add_xaxis(["A", "B", "C", "D", "E"]) # 设置y轴数据 bar.add_yaxis("柱形图", …

音频smmu问题之smmu学习

一、音频smmu 内存访问问题 在工作中,遇到一个smmu问题,主要log信息如下: arm-smmu 15000000.apps-smmu: Unhandled arm-smmu context fault from soc:spf_core_platform:qcom,msm-audio-ion! arm-smmu 15000000.apps-smmu: FAR 0x0000000…

devc++跑酷小游戏3.5.0

本来想搞存档的&#xff0c;失败了&#xff0c;要再学学文件操作的函数。还有一个打印地图的函数&#xff0c;更失败&#xff0c;彻底放弃。最近开学了&#xff0c;游戏不会经常更新&#xff0c;要写作业。昨天写到10点T_T #include<bits/stdc.h> #include<windows.h…

vue-router4 (二) 引入并配置路由

1.在项目src/router/index.ts 文件夹下配置路由&#xff1a; import { createRouter ,createWebHistory,RouteRecordRaw} from "vue-router"; //1.引入路由//3.routes配置项 const routes:Array<RouteRecordRaw> [{path:"/", //路径name:"…

【GameFramework框架内置模块】4、内置模块之调试器(Debugger)

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群&#xff1a;398291828 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录&#xff1a;…

Groovy(第八节) Groovy 之类

目录 Song 类 Groovy 类就是 Java 类 类的关系 类初始化 核心的灵活性

如何使用Fastapi上传文件?先从请求体数据讲起

文章目录 1、请求体数据2、form表单数据3、小文件上传1.单文件上传2.多文件上传 4、大文件上传1.单文件上传2.多文件上传 1、请求体数据 前面我们讲到&#xff0c;get请求中&#xff0c;我们将请求数据放在url中&#xff0c;其实是非常不安全的&#xff0c;我们更愿意将请求数…

【MySQL】MySQL复合查询--多表查询自连接子查询 - 副本

文章目录 1.基本查询回顾2.多表查询3.自连接4.子查询 4.1单行子查询4.2多行子查询4.3多列子查询4.4在from子句中使用子查询4.5合并查询 4.5.1 union4.5.2 union all 1.基本查询回顾 表的内容如下&#xff1a; mysql> select * from emp; ----------------------------…