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函数。其具体流程可大致分为三个阶段：

  1. 模板解析阶段：将一堆模板字符串用正则等方式解析成抽象语法树AST；
  2. 优化阶段：遍历AST，找出其中的静态节点，并打上标记；
  3. 代码生成阶段：将AST转换成渲染函数；

这三个阶段在源码中分别对应三个模块，下面给出三个模块的源代码在源码中的路径：

  1. 模板解析阶段——解析器——源码路径：src/compiler/parser/index.js;
  2. 优化阶段——优化器——源码路径：src/compiler/optimizer.js;
  3. 代码生成阶段——代码生成器——源码路径：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，才有了后续的视图更新。接着介绍了什么是模板编译，以及介绍了把用户所写的模板经过层层处理直到最终渲染的视图中这个整体的渲染流程；最后介绍了模板编译过程中所需要使用的抽象语法树的概念以及分析了模板编译的具体实施流程，其流程大致分为三个阶段，分别是模板解析阶段、优化阶段和代码生成阶段。那么接下来的几篇文章将会把这三个阶段逐一进行分析介绍。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2779934.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

c++猜数游戏

c++猜数游戏

一.题目要求 系统随机产生1~100的随机数,进行猜数,如果猜的数过大提示猜数过大,过小提出猜数过小,直到猜出正确的数字 二.代码 三.示例
阅读更多...
嵌入式电子产品开发感悟！

嵌入式电子产品开发感悟！

​ 2023特别深有感触的有以下几个事件&#xff1a; 1. 早在2月底就提交报告&#xff1a;抓紧开一款便携式的空气波压力按摩仪外壳&#xff0c;包括模具费和100台试产物料费用总计不超过22W&#xff0c;保证最迟在4月中旬全部生产好&#xff0c;以供业务参加5月份开始的大健康展…
阅读更多...
测试编码规范

测试编码规范

0.测试代码和业务代码要分离 把测试代码和业务代码放进各自的所属的"盒子"中&#xff0c;互不干扰 Q:为什么要分离? 分门别类&#xff0c;避免混乱&#xff0c;方便维护 不在试卷上打草稿而是专门准备草稿纸 没人会在客厅做饭吧&#xff0c;不然要厨房干什么 Q:如…
阅读更多...
视觉SLAM十四讲学习笔记（二）三维空间刚体

视觉SLAM十四讲学习笔记（二）三维空间刚体

哔哩哔哩课程连接&#xff1a;视觉SLAM十四讲ch3_哔哩哔哩_bilibili​ 目录 一、旋转矩阵 1 点、向量、坐标系 2 坐标系间的欧氏变换 3 变换矩阵与齐次坐标 二、实践&#xff1a;Eigen&#xff08;1&#xff09; 运行报错记录与解决 三、旋转向量和欧拉角 1 旋转向量 …
阅读更多...
【OrangePi Zero2 智能家居】需求及项目准备

【OrangePi Zero2 智能家居】需求及项目准备

一、需求及项目准备 二、系统框图 三、硬件接线 四、语音模块配置 五、模块测试 一、需求及项目准备 语音接入控制各类家电&#xff0c;如客厅灯、卧室灯、风扇Socket网络编程&#xff0c;实现Sockect发送指令远程控制各类家电烟雾警报监测&#xff0c; 实时检查是否存在煤气…
阅读更多...
谷粒商城【成神路】-【6】——商品维护

谷粒商城【成神路】-【6】——商品维护

目录 &#x1f9c2;1.发布商品 &#x1f953;2.获取分类关联品牌 &#x1f32d;3.获取分类下所有分组和关联属性 &#x1f37f;4.商品保存功能 &#x1f9c8;5.sup检索 &#x1f95e;6.sku检索 1.发布商品 获取用户系统等级~&#xff0c;前面生成了后端代码&#xff…
阅读更多...
前端面试题——二叉树遍历

前端面试题——二叉树遍历

前言 二叉树遍历在各种算法和数据结构问题中都有广泛的应用&#xff0c;如二叉搜索树、表达式的树形表示、堆的实现等。同时也是前端面试中的常客&#xff0c;掌握好二叉树遍历算法对于一名合格的前端工程师来说至关重要。 概念 二叉树遍历&#xff08;Binary Tree Traversa…
阅读更多...
自然语言处理（NLP）—— 基本概念

自然语言处理（NLP）—— 基本概念

自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&#xff09;是人工智能和语言学领域的一个分支&#xff0c;它涉及到计算机和人类&#xff08;自然&#xff09;语言之间的相互作用。它的主要目标是让计算机能够理解、解释和生成人类语言的数据。NLP结…
阅读更多...
73. 矩阵置零（Java）

73. 矩阵置零（Java）

目录 题目描述&#xff1a;输入&#xff1a;输出&#xff1a;代码实现&#xff1a; 题目描述&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 输入&#xff1a; matrix [[1,1,1],[1,0,…
阅读更多...
Linux操作系统基础（九）：Linux用户与权限

Linux操作系统基础（九）：Linux用户与权限

文章目录 Linux用户与权限 一、文件权限概述 二、终端命令&#xff1a;组管理 三、终端命令&#xff1a;用户管理 1、创建用户 、 设置密码 、删除用户 2、查看用户信息 3、su切换用户 4、sudo 4.1、给指定用户授予权限 4.2、使用 用户 zhangsan登录, 操作管理员命令…
阅读更多...
汉服租赁网站：Java技术的文化应用

汉服租赁网站：Java技术的文化应用

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
Matplotlib核心：掌握Figure与Axes

Matplotlib核心：掌握Figure与Axes

详细介绍Figure和Axes&#xff08;基于Matplotlib&#xff09; &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333; 一、Figure&#xff08;图形&#xff09;&#x1f333;&#x1f341;1. 创建Figure&#x1f341;&#x1f341;2. 添加Axes&am…
阅读更多...
【浙大版《C语言程序设计实验与习题指导（第4版）》】实验7-1-6 求一批整数中出现最多的个位数字（附测试点）

【浙大版《C语言程序设计实验与习题指导（第4版）》】实验7-1-6 求一批整数中出现最多的个位数字（附测试点）

定一批整数&#xff0c;分析每个整数的每一位数字&#xff0c;求出现次数最多的个位数字。例如给定3个整数1234、2345、3456&#xff0c;其中出现最多次数的数字是3和4&#xff0c;均出现了3次。 输入格式&#xff1a; 输入在第1行中给出正整数N&#xff08;≤1000&#xff0…
阅读更多...
揭秘 LLM 推理：全面解析 LLM 推理性能的关键因素

揭秘 LLM 推理：全面解析 LLM 推理性能的关键因素

一、背景介绍 自 OpenAI 一年前发布 ChatGPT 以来&#xff0c;大型语言模型&#xff08;LLM&#xff09;领域经历了前所未有的快速发展。在短短一年时间内&#xff0c;涌现出了数以百计的 LLM 模型&#xff0c;包括开源模型如 LLaMA、Mistral、Yi、Baichuan、Qwen&#xff0c;…
阅读更多...
WSL下如何使用Ubuntu本地部署Vits2.3-Extra-v2:中文特化修复版（新手从0开始部署教程）

WSL下如何使用Ubuntu本地部署Vits2.3-Extra-v2:中文特化修复版（新手从0开始部署教程）

环境&#xff1a; 硬&#xff1a; 台式电脑 1.cpu:I5 11代以上 2.内存16G以上 3.硬盘固态500G以上 4.显卡N卡8G显存以上 20系2070以上 本案例英伟达4070 12G 5.网络可连github 软&#xff1a; Win10 专业版 19045以上 WSL2 -Ubuntu22.04 1.bert-Vits2.3 Extra-v2:…
阅读更多...
Gemini VS GPT-4，当前两大顶级AI模型实测

Gemini VS GPT-4，当前两大顶级AI模型实测

随着谷歌在AI军备竞赛中急起直追&#xff0c;“有史以来最强大模型”Gemini Advanced终于上线&#xff0c;AI爱好者们总算等来了一款号称能够匹敌GPT-4的大语言模型。 月费19.99美元&#xff08;包含Google One订阅&#xff09;的Gemini Advanced实际表现如何&#xff1f;究竟…
阅读更多...
cad基础学习

cad基础学习

基础操作与设置 切换工作空间 调整鼠标 界面右击&#xff0c;选项 选项中找到显示&#xff0c;十字光标调到最大 当然也可以输入命令op,回车。它会自动打开这个界面 画一个直线 上面选直接&#xff0c;单击俩个点&#xff0c;画出一个直线。然后空格收尾&#xff0c;这就画出…
阅读更多...
disql备份还原

disql备份还原

disql备份还原 前言 本文档根据官方文档&#xff0c;进行整理。 一、概述 在 disql 工具中使用 BACKUP 语句你可以备份整个数据库。通常情况下&#xff0c;在数据库实例配置归档后输入以下语句即可备份数据库&#xff1a; BACKUP DATABASE BACKUPSET db_bak_01;语句执行完…
阅读更多...
C++多态：定义、实现及原理/继承关系中的虚函数表

C++多态：定义、实现及原理/继承关系中的虚函数表

目录​​​​​​​ 一、多态的定义及实现 1.1多态的概念​​​​​​​ 1.2多态的构成条件 1.3virtual虚函数 1.4虚函数的重写 二、override和final 三、抽象类 3.1概念 3.2接口继承和实现继承 四、多态的原理 4.1虚函数表 4.2 多态的原理 4.3动态绑定与静态绑定…
阅读更多...
蓝桥杯---分小组

蓝桥杯---分小组

9名运动员参加比赛,需要分3组进行预赛. 有哪些分组的方案呢? 我们标记运动员为 A,B,C .... I 下面的程序列出了所有的分组方法。 该程序的正常输出为:
阅读更多...
最新文章

Copyright @ 2022~2023