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

什么是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.mzph.cn/news/707775.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python中检查一个数字是否是科技数的完整指南

目录 前言 什么是科技数? 如何判断一个数字是否是科技数? 分割数字并计算平方 Python实现科技数检测的示例代码 科技数的应用场景 1. 数字游戏 2. 数据处理 3. 算法优化 4. 数据结构设计 总结 前言 科技数(Tech Number)是一…

(二十三)Flask之高频面试点

目录: 每篇前言:Q1:为什么把request和session放在一起?Q2:Local对象的作用?Q3::LocalStack对象的作用?Q4:一个运行中的Flask应用程序分别包括几个Local/LocalStack&#…

若依前后端分离版开源项目学习

前言:vscode中vue代码没有高亮显示,可以下载vetur插件解决,ctrl点击无法跳转函数定义问题,可以下载vue-helper插件解决;idea中ctrl点击函数即可跳转函数定义。 一、登录 1.生成验证码 基本思路: 后端生…

vue a-table 实现指定字段相同数据合并行

vue a-table 实现相同数据合并行 实现效果代码实现cloums数据格式数据源格式合并代码 实现效果 代码实现 cloums数据格式 const getColumns function () {return [{title: "分类",dataIndex: "checked",width: "150px",customRender: (text, …

JMeter--9.录制脚本

录制步骤 1.新建线程组:测试计划->线程->线程组 测试计划下,至少要有1个线程组,因为在录制器中需要选择【目标控制器】 2. 新建录制器:测试计划->非测试原件->HTTP(S)测试脚本记录器(HTTP代理服务器&…

【vue】vue2 和 vue3 的区别,响应式/性能提升/渲染函数/插槽

vue2/vue3 的对比 响应式原理 vue2 使用 definePropertyvue3 使用 proxyapi vue2 是选项式 options API 基于对象的方式,将组件的选项 data,methods 等作为组件实例属性代码逻辑比较复杂,难以维护data 必须是函数使用 mixin 复用相同逻辑 命…

Ansible自动化运维(四)jinja2 模板、Roles角色详解

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

PHP7.3 GD库报错imagecreatefromstring(): No JPEG support in this PHP build

最近在做docker容器的时候遇到了问题,安装的GD库没有JPEG支持,因为项目用到了绘图技术,这个支持必不可少。要解决这个问题也很简单: 安装jpeg支持,重新编译gd库,生成gd.so文件,重新加载gd库扩展…

Springboot+vue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频: Springbootvue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的考务报名平台,采用M(model&#xff0…

vue2后台管理系统demo,包含增删查改、模糊搜索、分页

因一直敲小程序,vue不熟练,自己练手项目,就包含增删查改以及模糊搜索分页 一、页面简单但功能齐全 二、数据是mock模拟 三、启动步骤 1、 json-server --watch data.json 启动mock数据 2、npm i 下载依赖 3、npm run serve 四、github地址…

ETH网络中的账户

ETH网络中的账户 Externally owned accounts (EOA) - 外部账户 由用户控制,我们导入助记词创建的账户就属于此类账户。 Contract accounts (smart contracts) - 合约账户 合约账户由以太坊虚拟机执行的代码控制。它也被称为智能合约。合约帐户有相关的代码和数据存…

Redis的高性能之道

前言:做码农这么多年,我也读过很多开源软件或者框架的源码,在我看来,Redis是我看过写得最优美、最像一件艺术品的软件,正如Redis之父自己说的那样,他宁愿以一个糟糕的艺术家身份而不是一名好程序员被别人记…

python opencv比较图片相似度

目录 一:均值哈希算法 二:三直方图算法 三:单通道直方图 一:均值哈希算法 均值哈希算法是一种快速比较图像相似度的方法。它首先将图像转化为灰度图像,然后计算图像的均值,接着将每个像素的

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

算法沉淀——动态规划之回文串问题(上)(leetcode真题剖析)

算法沉淀——动态规划之回文串问题 01.回文子串02.最长回文子串03.分割回文串 IV04.分割回文串 II05.最长回文子序列06.让字符串成为回文串的最少插入次数 01.回文子串 题目链接:https://leetcode.cn/problems/palindromic-substrings/ 给你一个字符串 s &#xf…

雾锁王国服务器官方配置要求说明

雾锁王国/Enshrouded服务器CPU内存配置如何选择?阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置,支持4人玩家畅玩,自带10M公网带宽,1个月90元,3个月271元,幻兽帕鲁服务器申请页面 https://t.aliyun.com…

C# TCP/IP协议

在C#中编写TCP/IP通信 //开启监听各个网络的连接是否成功 //开启服务端,监听,并且进入监听线程 try { IPAddress ip IPAddress.Parse(HostAddress); IPEndPoint ipe new IPEndPoint(ip, HostPort); m_services new Socket(Add…

深入JVM:解析OOM的三大场景,原因及实战解决方案

在Java应用程序开发中,OutOfMemoryError(OOM)是一个令人头痛的问题。当JVM中的内存无法满足应用程序的需求时,就会抛出这个错误。本文将深入探讨OOM的三大场景:堆内存溢出、方法区内存溢出和栈内存溢出,并分…

ChatGPT能替代什么人?

上一讲关于ChatGPT的热炒,其实对于我们来说算是敲了敲警钟。 其实在今天,关于ChatGPT,最多人关注的一个问题就是:ChatGPT能取代人吗,或者说能抢人的饭碗么吗? 有人说不能,也有人说能&#xff…

代码随想录算法训练营day30 || 332.重新安排行程(未完成),51. N皇后,37. 解数独(未完成)

这就是传说中的N皇后&#xff1f; 回溯算法安排&#xff01;| LeetCode&#xff1a;51.N皇后_哔哩哔哩_bilibili // 时间复杂度O(n^2) // 空间复杂度O(n^2)class Solution {List<List<String>> res new ArrayList<>();public List<List<String>>…