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://www.hqwc.cn/news/465383.html

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

相关文章

【蓝桥杯Python】试题 算法训练 P0804

【蓝桥杯Python】试题 算法训练 P0804

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 编写一个函数void strcompress(char *s)&#xff0c;输入一个字符串&#xff08;只包含小写字母和空格&#xff0c;且长度小于1000&…
阅读更多...
sheng的学习笔记-网络爬虫scrapy框架

sheng的学习笔记-网络爬虫scrapy框架

基础知识&#xff1a; scrapy介绍 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总…
阅读更多...
Modern C++ 内存篇2 - 关于relocation的思考

Modern C++ 内存篇2 - 关于relocation的思考

在上一节《Modern C 内存篇1 - std::allocator VS pmr-CSDN博客》我们详细讨论了关于如何判断用不用memmove优化的代码&#xff0c;结论可以总结为&#xff1a; 只有_Tp是trivial 且 用std::allocator 才会调用memmove。 所有case如下表格所示&#xff1a; No_Tpallocator typ…
阅读更多...
2024刘谦春晚第二个扑克牌魔术

2024刘谦春晚第二个扑克牌魔术

前言 就是刚才看春晚感觉这个很神奇&#xff0c;虽然第一个咱模仿不过来&#xff0c;第二个全国人民这么多人&#xff0c;包括全场观众都有成功&#xff0c;这肯定是不需要什么技术&#xff0c;那我觉得这个肯定就是数学了&#xff0c;于是我就胡乱分析一通。 正文 首先准备…
阅读更多...
为什么无法正常访问TikTok？该使用跨境专线吗？

为什么无法正常访问TikTok？该使用跨境专线吗？

TikTok作为全球范围内备受欢迎的社交媒体平台&#xff0c;吸引了数以亿计的用户。然而&#xff0c;有时候用户可能会遇到无法正常访问TikTok的问题&#xff0c;这可能涉及到多方面的因素。本文将深入探讨为什么可能无法正常访问TikTok&#xff0c;并考虑是否使用 TikTok跨境专线…
阅读更多...
【机器学习】数据清洗之识别异常点

【机器学习】数据清洗之识别异常点

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步…
阅读更多...
单片机学习笔记---蜂鸣器播放提示音音乐（天空之城）

单片机学习笔记---蜂鸣器播放提示音音乐（天空之城）

目录 蜂鸣器播放提示音 蜂鸣器播放音乐&#xff08;天空之城&#xff09; 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识&#xff0c;这一节开始代码演示&#xff01; 蜂鸣器播放提示音 先创建工程&#xff1a;蜂鸣器播放提示音 把我们之前模块化的…
阅读更多...
第73左侧菜单实现

第73左侧菜单实现

layout下面新建menu layout index.vue导入menu import Menu from /views/layout/menu菜单实现&#xff1a; <template><el-menuactive-text-color"#ffd04b"background-color"#2d3a4b"class"el-menu-vertical-demo"default-active&quo…
阅读更多...
MySQL篇----第二十篇

MySQL篇----第二十篇

系列文章目录 文章目录 系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别？三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法？（选择几条）前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍…
阅读更多...
【ES6】模块化

【ES6】模块化

nodejs遵循了CommonJs的模块化规范 导入 require() 导出 module.exports 模块化的好处&#xff1a; 模块化可以避免命名冲突的问题大家都遵循同样的模块化写代码&#xff0c;降低了沟通的成本&#xff0c;极大方便了各个模块之间的相互调用需要啥模块&#xff0c;调用就行 …
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的房屋出售出租系统

【开源】基于JAVA+Vue+SpringBoot的房屋出售出租系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…
阅读更多...
算法-4-归并排序

算法-4-归并排序

归并排序 public class Code01_MergeSort {// 递归方法实现public static void mergeSort1(int[] arr) {if (arr null || arr.length < 2) {return;}process(arr, 0, arr.length - 1);}// 请把arr[L..R]排有序// l...r N// T(N) 2 * T(N / 2) O(N)// O(N * logN)public …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023