Vue源码系列讲解——模板编译篇【一】(综述)
目录
1. 前言
2. 什么是模板编译
3. 整体渲染流程
4. 模板编译内部流程
4.1 抽象语法树AST
4.2 具体流程
5. 总结
1. 前言
在前几篇文章中,我们介绍了Vue
中的虚拟DOM
以及虚拟DOM
的patch
(DOM-Diff)过程,而虚拟DOM
存在的必要条件是得先有VNode
,那么VNode
又是从哪儿来的呢?这就是接下来几篇文章要说的模板编译。你可以这么理解:把用户写的模板进行编译,就会产生VNode
。
2. 什么是模板编译
我们知道,在日常开发中,我们把写在<template></template>
标签中的类似于原生HTML
的内容称之为模板。这时你可能会问了,为什么说是“类似于原生HTML
的内容”而不是“就是HTML
的内容”?因为我们在开发中,在<template></template>
标签中除了写一些原生HTML
的标签,我们还会写一些变量插值,如,或者写一些Vue
指令,如v-on
、v-if
等。而这些东西都是在原生HTML
语法中不存在的,不被接受的。但是事实上我们确实这么写了,也被正确识别了,页面也正常显示了,这又是为什么呢?
这就归功于Vue
的模板编译了,Vue
会把用户在<template></template>
标签中写的类似于原生HTML
的内容进行编译,把原生HTML
的内容找出来,再把非原生HTML
找出来,经过一系列的逻辑处理生成渲染函数,也就是render
函数,而render
函数会将模板内容生成对应的VNode
,而VNode
再经过前几篇文章介绍的patch
过程从而得到将要渲染的视图中的VNode
,最后根据VNode
创建真实的DOM
节点并插入到视图中, 最终完成视图的渲染更新。
而把用户在<template></template>
标签中写的类似于原生HTML
的内容进行编译,把原生HTML
的内容找出来,再把非原生HTML
找出来,经过一系列的逻辑处理生成渲染函数,也就是render
函数的这一段过程称之为模板编译过程。
3. 整体渲染流程
所谓渲染流程,就是把用户写的类似于原生HTML
的模板经过一系列处理最终反应到视图中称之为整个渲染流程。这个流程在上文中其实已经说到了,下面我们以流程图的形式宏观的了解一下,流程图如下:
从图中我们也可以看到,模板编译过程就是把用户写的模板经过一系列处理最终生成render
函数的过程。
4. 模板编译内部流程
那么模板编译内部是怎么把用户写的模板经过处理最终生成render
函数的呢?这内部的过程是怎样的呢?
4.1 抽象语法树AST
我们知道,用户在<template></template>
标签中写的模板对Vue
来说就是一堆字符串,那么如何解析这一堆字符串并且从中提取出元素的标签、属性、变量插值等有效信息呢?这就需要借助一个叫做抽象语法树的东西。
所谓抽象语法树,在计算机科学中,抽象语法树(AbstractSyntaxTree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。比如,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现;而类似于if-condition-then这样的条件跳转语句,可以使用带有两个分支的节点来表示。——来自百度百科
我就知道,这段话贴出来也是白贴,因为看了也看不懂,哈哈。那么我们就以最直观的例子来理解什么是抽象语法树。请看下图:
从图中我们可以看到,一个简单的HTML
标签的代码被转换成了一个JS
对象,而这个对象中的属性代表了这个标签中一些关键有效信息。如图中标识。 有兴趣的同学可以在这个网站在线转换试试:https://astexplorer.net/
4.2 具体流程
将一堆字符串模板解析成抽象语法树AST
后,我们就可以对其进行各种操作处理了,处理完后用处理后的AST
来生成render
函数。其具体流程可大致分为三个阶段:
- 模板解析阶段:将一堆模板字符串用正则等方式解析成抽象语法树
AST
; - 优化阶段:遍历
AST
,找出其中的静态节点,并打上标记; - 代码生成阶段:将
AST
转换成渲染函数;
这三个阶段在源码中分别对应三个模块,下面给出三个模块的源代码在源码中的路径:
- 模板解析阶段——解析器——源码路径:
src/compiler/parser/index.js
; - 优化阶段——优化器——源码路径:
src/compiler/optimizer.js
; - 代码生成阶段——代码生成器——源码路径:
src/compiler/codegen/index.js
; 其对应的源码如下:
// 源码位置: /src/complier/index.jsexport const createCompiler = createCompilerCreator(function baseCompile (template: string,options: CompilerOptions
): CompiledResult {// 模板解析阶段:用正则等方式解析 template 模板中的指令、class、style等数据,形成ASTconst ast = parse(template.trim(), options)if (options.optimize !== false) {// 优化阶段:遍历AST,找出其中的静态节点,并打上标记;optimize(ast, options)}// 代码生成阶段:将AST转换成渲染函数;const code = generate(ast, options)return {ast,render: code.render,staticRenderFns: code.staticRenderFns}
})
可以看到 baseCompile
的代码非常的简短主要核心代码。
- const ast =parse(template.trim(), options):
parse
会用正则等方式解析template
模板中的指令、class
、style
等数据,形成AST
。 - optimize(ast, options):
optimize
的主要作用是标记静态节点,这是Vue
在编译过程中的一处优化,挡在进行patch
的过程中,DOM-Diff
算法会直接跳过静态节点,从而减少了比较的过程,优化了patch
的性能。 - const code =generate(ast, options): 将
AST
转化成render
函数字符串的过程,得到结果是render
函数 的字符串以及staticRenderFns
字符串。
最终 baseCompile
的返回值
{ast: ast,render: code.render,staticRenderFns: code.staticRenderFns}
最终返回了抽象语法树( ast ),渲染函数( render ),静态渲染函数( staticRenderFns ),且render
的值为code.render
,staticRenderFns
的值为code.staticRenderFns
,也就是说通过 generate
处理 ast
之后得到的返回值 code
是一个对象。
下面再给出模板编译内部具体流程图,便于理解。流程图如下:
5. 总结
本篇文章首先引出了为什么会有模板编译,因为有了模板编译,才有了虚拟DOM
,才有了后续的视图更新。接着介绍了什么是模板编译,以及介绍了把用户所写的模板经过层层处理直到最终渲染的视图中这个整体的渲染流程;最后介绍了模板编译过程中所需要使用的抽象语法树的概念以及分析了模板编译的具体实施流程,其流程大致分为三个阶段,分别是模板解析阶段、优化阶段和代码生成阶段。那么接下来的几篇文章将会把这三个阶段逐一进行分析介绍。
相关文章:
Vue源码系列讲解——模板编译篇【一】(综述)
目录 1. 前言 2. 什么是模板编译 3. 整体渲染流程 4. 模板编译内部流程 4.1 抽象语法树AST 4.2 具体流程 5. 总结 1. 前言 在前几篇文章中,我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程,而虚拟DOM存在的必要条件是得先有VNode&…...
【机器学习】数据清洗之识别异常点
🎈个人主页:甜美的江 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步…...
MacOS 制作 TF 卡/ U 盘镜像
最近有张老的 TF 卡没办法直接拷贝里面的数据,于是打算利用 dd 工具直接全卡拷贝为镜像再分析里面的数据 在终端中,输入以下命令来列出所有磁盘设备: diskutil list这将显示Mac上所有的磁盘设备。你需要找到TF卡对应的设备,它通…...
怎么用postman调用webservice(反推SoapUI)
<soapenv:Envelope xmlns:soapenv“http://schemas.xmlsoap.org/soap/envelope/” xmlns:lis“LisDataTrasen”> soapenv:Header/ soapenv:Body lis:Test lis:test111111111</lis:test> </lis:Test> </soapenv:Body> </soapenv:Envelope> Conten…...
【开源】JAVA+Vue.js实现衣物搭配系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣物收藏模块 三、系统设计3.1 用例设计3.2 E-R图设计3.3 数据库设计3.3.1 衣物档案表3.3.2 衣物搭配表3.3.3 衣物收藏表 四、系统实现4.1 登录页4.2 衣物档案模块4.3 衣物搭配模块4.4…...
【Flask + AI】接入CHATGLM API 实现翻译接口
【Flask AI】接入CHATGLM API 实现翻译接口 最近的项目中,需要加一个翻译功能,正好chatglm4发布了,于是决定着手用它实现。 https://chatglm.cn 准备 首先,在chatglm开发者中心申请api key,这里不再赘述 其次&…...
并发事务带来的问题及解决方法
引言 在数据库系统中,事务是指一组操作被视为一个逻辑单元,要么全部执行成功,要么全部不执行,保证数据库的一致性和完整性。而并发事务则是指多个事务同时执行的情况。虽然并发事务能够提高系统的性能和吞吐量,但也会…...
CRNN介绍:用于识别图中文本的深度学习模型
CRNN:用于识别图中文本的深度学习模型 CRNN介绍:用于识别图中文本的深度学习模型CRNN的结构组成部分工作原理 CRNN结构分析卷积层(Convolutional Layers)递归层(Recurrent Layers)转录层(Transc…...
机器人运动学林沛群——变换矩阵
对于仅有移动,由上图可知: A P B P A P B o r g ^AP^BP^AP_{B org} APBPAPBorg 对于仅有转动,可得: A P B A R B P ^AP^A_BR^BP APBARBP 将转动与移动混合后,可得: 一个例子 在向量中ÿ…...
阿里云增加数据库访问白名单
阿里云增加数据库访问白名单 概况 我们希望在外网访问数据库时,可能会遇到无法连接的问题,这有可能是被拦截了。这时就需要去查看自己的ip有没有在白名单里面,没有的话就把ip加入到白名单。 路径 阿里云控制台-搜索RDS-进入RDS管理控制台…...
Rust基础拾遗--辅助功能
Rust基础拾遗 前言1.错误处理1.1 panic为什么是 Result 2. create与模块3. 宏4. 不安全代码5. 外部函数 前言 通过Rust程序设计-第二版笔记的形式对Rust相关重点知识进行汇总,读者通读此系列文章就可以轻松的把该语言基础捡起来。 1.错误处理 Rust 中的两类错误处理…...
【数据结构】双向链表(链表实现+测试+原码)
前言 在双向链表之前,如果需要查看单链表来复习一下,链接在这里: http://t.csdnimg.cn/Ib5qS 1.双向链表 1.1 链表的分类 实际中链表的结构非常多样,以下情况组合起来就有8种链表结构: 1.1.1 单向或者双向 1.1.2 …...
ChatGPT 3.5与4.0:深入解析技术进步与性能提升的关键数据
大家好,欢迎来到我的博客!今天我们将详细比较两个引人注目的ChatGPT版本——3.5和4.0,通过一些关键数据来深入解析它们之间的差异以及4.0版本的技术进步。 1. 模型规模与参数 ChatGPT 3.5: 参数数量:约1.7亿个模型层数…...
前端JavaScript篇之ajax、axios、fetch的区别
目录 ajax、axios、fetch的区别AjaxAxiosFetch总结注意 ajax、axios、fetch的区别 在Web开发中,ajax、axios和fetch都是用于与服务器进行异步通信的技术,但它们在实现方式和功能上有所不同。 Ajax 定义与特点:Ajax是一种在无需重新加载整个…...
【PyTorch][chapter 15][李宏毅深度学习][Neighbor Embedding-LLE]
前言: 前面讲的都是线性降维,本篇主要讨论一下非线性降维. 流形学习(mainfold learning)是一类借鉴了拓扑流行概念的降维方法. 如上图,欧式距离上面 A 点跟C点更近,距离B 点较远 但是从图形拓扑结构来看, …...
在JSP中实现JAVABEAN
在JSP中实现JAVABEAN 问题陈述 创建Web应用程序以连接数据库并检索作者名、地址、城市、州及邮政编码等与作者的详细信息。JavaBean组件应接受作者ID、驱动程序名及URL作为参数。信息要从authors表中检索。 解决方案 要解决上述问题,需要执行以下任务: 创建Web应用程序。创…...
智能优化算法 | Matlab实现飞蛾扑火(MFO)(内含完整源码)
文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 智能优化算法 | Matlab实现飞蛾扑火(MFO)(内含完整源码) 源码设计 %%%% clear all clc SearchAgents_no=100; % Number of search ag...
LSF 主机状态 unreach 分析
在LSF集群运行过程中,有主机状态变为 unreach。熟悉LSF的朋友都知道主机状态为 unreach 表示主机上的 SBD 服务中断服务了,但其它服务 LIM 和 RES 还在正常运行。 影响分析 那么主机上的 SBD 服务中断的影响是什么呢? 我们需要先明白 SBD …...
SpringBoot日志
自定义日志 导入的是slf4j的Logger类 package app.controller;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.GetMapping;RestController pu…...
006集——where语句进行属性筛选——arcgis
在arcgis中, dBASE 文件除了 WHERE 语句以外,不支持 其它 SQL 命令。选择窗口如下: 首先,我们了解下什么是where语句。 WHERE语句是SQL语言中使用频率很高的一种语句。它的作用是从数据库表中选择一些特定的记录行来进行操作。WHE…...
《动手学深度学习(PyTorch版)》笔记8.3
注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…...
静态时序分析:建立时间分析
静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析中,建立时间检查约束了触发器时钟引脚(时钟路径)和输入数据引脚(数据路径)之间的时序关系&#x…...
深入探究 HTTP 简化:httplib 库介绍
✏️心若有所向往,何惧道阻且长 文章目录 简介特性主要类介绍httplib::Server类httplib::Client类httplib::Request类httplib::Response类 示例服务器客户端 总结 简介 在当今的软件开发中,与网络通信相关的任务变得日益普遍。HTTP(Hypertext…...
ARP欺骗攻击利用之抓取https协议的用户名与密码
1.首先安装sslstrip 命令执行:apt-get install sslstrip 2.启动arp欺骗 arpspoof -i ech0 -t 192.168.159.148 192.168.159.2 arpspoof -i ech0(网卡) -t 目标机ip 本地局域网关 3.命令行输入: vim /etc/ettercap/etter.conf进入配置文件 找到下红框的内容&a…...
<s-table>、<a-table>接收后端数据
对于 中的 <template #bodyCell“{ column, record }”> : <s-tableref"table":columns"columns":data"loadData":alert"options.alert.show"bordered:row-key"(record) > record.id":tool-config&…...
[数学]高斯消元
介绍 用处:求解线性方程组 加减消元法和代入消元法 这里引用了高斯消元解线性方程组----C实现_c用高斯消元法解线性方程组-CSDN博客 改成了自己常用的形式: int gauss() {int c, r; // column, rowfor (c 1, r 1; c < n; c ){int maxx r; //…...
【Linux】gdb调试与make/makefile工具
目录 导读 1. make/Makefile 1.1 引入 1.2 概念 1.3 语法规则 1.4 示例 2. Linux调试器-gdb 2.1 引入 2.2 概念 2.3 使用 导读 我们在上次讲了Linux编辑器gcc\g的使用,今天我们就来进一步的学习如何调试,以及makefile这个强大的工具。 1. mak…...
使用Arcgis裁剪
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、掩膜提取二、随意裁剪三、裁剪 前言 因为从网站下载的是全球气候数据,而我们需要截取成中国部分,需要用到Arcgis的裁剪工具 一、掩…...
sheng的学习笔记-网络爬虫scrapy框架
基础知识: scrapy介绍 何为框架,就相当于一个封装了很多功能的结构体,它帮我们把主要的结构给搭建好了,我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据,提取数据的框架,我们熟知爬虫总…...
Qt PCL学习(三):点云滤波
注意事项 版本一览:Qt 5.15.2 PCL 1.12.1 VTK 9.1.0前置内容:Qt PCL学习(一):环境搭建、Qt PCL学习(二):点云读取与保存、PCL学习六:Filtering-滤波 0. 效果演示 1. vo…...
Ainx-V0.2-简单的连接封装与业务绑定
📕作者简介: 过去日记,致力于Java、GoLang,Rust等多种编程语言,热爱技术,喜欢游戏的博主。 📗本文收录于Ainx系列,大家有兴趣的可以看一看 📘相关专栏Rust初阶教程、go语言基础系列…...
《杨绛传:生活不易,保持优雅》读书摘录
目录 书简介 作者成就 书中内容摘录 良好的家世背景,书香门第为求学打基础 求学相关 念大学 清华研究生 自费英国留学 法国留学自学文学 战乱时期回国 当校长 当小学老师 创造话剧 支持钱锺书写《围城》 出任震旦女子文理学院的教授 接受清华大学的…...
ChatGPT在肾脏病学领域的专业准确性评估
ChatGPT在肾脏病学领域的专业表现评估 随着人工智能技术的飞速发展,ChatGPT作为一个先进的机器学习模型,在多个领域显示出了其对话和信息处理能力的潜力。近期发表在《美国肾脏病学会临床杂志》(影响因子:9.8)上的一项…...
Centos7.9安装SQLserver2017数据库
Centos7.9安装SQLserver2017数据库 一、安装前准备 挂载系统盘 安装依赖 yum install libatomic* -y 二、yum方式安装 # 配置 yum 源 wget -O /etc/yum.repos.d/mssql-server.repo https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repoyum clean all yum…...
spring boot和spring cloud项目中配置文件application和bootstrap中的值与对应的配置类绑定处理
在前面的文章基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136065211 加载完文件转换为 Environment 中对应的值之后,接下来需要将对应的值与对应的配置类进行绑定,方便对应的组件取值处理接下来的操作。 对应的配置值与配置类绑定通过 Con…...
每天一个数据分析题(一百五十四)
给定下面的Python代码片段,哪个选项正确描述了代码可能存在的问题? from scipy import stats 返回异常值的索引 z stats.zscore(data_raw[‘Age’]) z_outlier (z > 3) | (z < -3) z_outlier.tolist().index(1) A. 代码将返回数据集Age列中第…...
Django从入门到放弃
Django从入门到放弃 Django最初被设计用于具有快速开发需求的新闻类站点,目的是实现简单快捷的网站开发。 安装Django 使用anaconda创建环境 conda create -n django_env python3.10 conda activate django_env使用pip安装django python -m pip install Django查…...
C++中类的6个默认成员函数【构造函数】 【析构函数】
文章目录 前言构造函数构造函数的概念构造函数的特性 析构函数 前言 在学习C我们必须要掌握的6个默认成员函数,接下来本文讲解2个默认成员函数 构造函数 如果一个类中什么成员都没有,简称为空类。 空类中真的什么都没有吗?并不是,…...
06-Java适配器模式 ( Adapter Pattern )
原型模式 摘要实现范例 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁 适配器模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能 举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器。您将内…...
C# CAD交互界面-自定义面板集-添加快捷命令(五)
运行环境 vs2022 c# cad2016 调试成功 一、引用 using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.Runtime; using Autodesk.AutoCAD.Windows; using System; using System.Drawing; using System.Windows.Forms; 二、代码说明 [CommandMethod("Cre…...
Spring boot集成各种数据源操作数据库
一、最基础的数据源方式 1.导入maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency <dependency><groupId>com.mysql</groupId><art…...
K8s环境下rook-v1.13.3部署Ceph-v18.2.1集群
文章目录 1.K8s环境搭建2.Ceph集群部署2.1 部署Rook Operator2.2 镜像准备2.3 配置节点角色2.4 部署operator2.5 部署Ceph集群2.6 强制删除命名空间2.7 验证集群 3.Ceph界面 1.K8s环境搭建 参考:CentOS7搭建k8s-v1.28.6集群详情,把K8s集群完成搭建&…...
【JavaEE】传输层网络协议
传输层网络协议 1. UDP协议 1.1 特点 面向数据报(DatagramSocket)数据报大小限制为64k全双工不可靠传输有接收缓冲区,无发送缓冲区 UDP的特点,我理解起来就是工人组成的**“人工传送带”**: 面向数据报(…...
08-Java过滤器模式 ( Filter Pattern )
Java过滤器模式 实现范例 过滤器模式(Filter Pattern)或允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来 过滤器模式(Filter Pattern) 又称 标准模式(Criteria Pattern…...
ChatGPT高效提问—prompt常见用法(续篇八)
ChatGPT高效提问—prompt常见用法(续篇八) 1.1 对抗 对抗是一个重要主题,深入探讨了大型语言模型(LLM)的安全风险。它不仅反映了人们对LLM可能出现的风险和安全问题的理解,而且能够帮助我们识别这些潜在的风险,并通过切实可行的技术手段来规避。 截至目前,网络…...
微软.NET6开发的C#特性——接口和属性
我是荔园微风,作为一名在IT界整整25年的老兵,看到不少初学者在学习编程语言的过程中如此的痛苦,我决定做点什么,下面我就重点讲讲微软.NET6开发人员需要知道的C#特性,然后比较其他各种语言进行认识。 C#经历了多年发展…...
容器基础知识:容器和虚拟化的区别
虚拟化与容器化对比 容器化和虚拟化都是用于优化资源利用率并实现高效应用程序部署的技术。然而,它们在方法和关键特征上存在差异: 虚拟化: 可以理解为创建虚拟机 (VM)。虚拟机模拟一台拥有自己硬件(CPU、内存、存储)和操作系统…...
【Linux】vim的基本操作与配置(下)
Hello everybody!今天我们继续讲解vim的操作与配置,希望大家在看过这篇文章与上篇文章后都能够轻松上手vim! 1.补充 在上一篇文章中我们说过了,在底行模式下set nu可以显示行号。今天补充一条:set nonu可以取消行号。这两条命令大家看看就可…...
[office] 图文演示excel怎样给单元格添加下拉列表 #知识分享#经验分享
图文演示excel怎样给单元格添加下拉列表 在Excel表格中输入数据的时候,为了简便快捷的输入,经常需要给Excel单元格添加一个下拉菜单,这样在输入数据时不必按键盘,只是用鼠标选择选项就可以了。 比的位置。 4、可以看到一个预览的…...
【RT-DETR有效改进】利用SENetV2重构化网络结构 (ILSVRC冠军得主,全网独家首发)
👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是SENetV2,其是2023.11月的最新机制(所以大家想要发论文的可以在上面下点功夫),其是一种通过调整卷积网络中的通道关系来提升性能的网络结构。SENet并不是一个独立的网络模型,而…...