【Vue2.0源码学习】模板编译篇-模板解析阶段(整体运行流程)

news2024/12/23 17:33:48

文章目录

    • 1. 前言
    • 2. 什么是模板编译
    • 3. 整体渲染流程
    • 4. 模板编译内部流程
      • 4.1 抽象语法树AST
      • 4.2 具体流程
    • 5. 小总结
    • 6. 整体流程
    • 7. 回到源码
    • 8. 总结

1. 前言

在前几篇文章中,我们介绍了Vue中的虚拟DOM以及虚拟DOMpatch(DOM-Diff)过程,而虚拟DOM存在的必要条件是得先有VNode,那么VNode又是从哪儿来的呢?这就是接下来几篇文章要说的模板编译。你可以这么理解:把用户写的模板进行编译,就会产生VNode

2. 什么是模板编译

我们知道,在日常开发中,我们把写在<template></template>标签中的类似于原生HTML的内容称之为模板。这时你可能会问了,为什么说是“类似于原生HTML的内容”而不是“就是HTML的内容”?因为我们在开发中,在<template></template>标签中除了写一些原生HTML的标签,我们还会写一些变量插值,如,或者写一些Vue指令,如v-onv-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.js

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 模板解析阶段:用正则等方式解析 template 模板中的指令、class、style等数据,形成AST
  const 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 模板中的指令、classstyle等数据,形成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.renderstaticRenderFns 的值为code.staticRenderFns,也就是说通过 generate处理 ast之后得到的返回值 code 是一个对象。

下面再给出模板编译内部具体流程图,便于理解。流程图如下:
在这里插入图片描述

5. 小总结

本篇文章首先引出了为什么会有模板编译,因为有了模板编译,才有了虚拟DOM,才有了后续的视图更新。接着介绍了什么是模板编译,以及介绍了把用户所写的模板经过层层处理直到最终渲染的视图中这个整体的渲染流程;最后介绍了模板编译过程中所需要使用的抽象语法树的概念以及分析了模板编译的具体实施流程,其流程大致分为三个阶段,分别是模板解析阶段、优化阶段和代码生成阶段。那么接下来的几篇文章将会把这三个阶段逐一进行分析介绍。

6. 整体流程

前言中我们说了,在模板解析阶段主要做的工作是把用户在<template></template>标签内写的模板使用正则等方式解析成抽象语法树(AST)。而这一阶段在源码中对应解析器(parser)模块。

解析器,顾名思义,就是把用户所写的模板根据一定的解析规则解析出有效的信息,最后用这些信息形成AST。我们知道在<template></template>模板内,除了有常规的HTML标签外,用户还会一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则,所以解析器不可能只有一个,它应该除了有解析常规HTML的HTML解析器,还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。

另外,文本信息和标签属性信息却又是存在于HTML标签之内的,所以在解析整个模板的时候它的流程应该是这样子的:HTML解析器是主线,先用HTML解析器进行解析整个模板,在解析过程中如果碰到文本内容,那就调用文本解析器来解析文本,如果碰到文本中包含过滤器那就调用过滤器解析器来解析。如下图所示:

在这里插入图片描述

7. 回到源码

解析器的源码位于/src/complier/parser文件夹下,其主线代码如下:

// 代码位置:/src/complier/parser/index.js

/**
 * Convert HTML string to AST.
 */
export function parse(template, options) {
   // ...
  parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    start (tag, attrs, unary) {

    },
    end () {

    },
    chars (text: string) {

    },
    comment (text: string) {

    }
  })
  return root
}

从上面代码中可以看到,parse 函数就是解析器的主函数,在parse 函数内调用了parseHTML 函数对模板字符串进行解析,在parseHTML 函数解析模板字符串的过程中,如果遇到文本信息,就会调用文本解析器parseText函数进行文本解析;如果遇到文本中包含过滤器,就会调用过滤器解析器parseFilters函数进行解析。

8. 总结

本篇文章主要梳理了模板解析的整体运行流程,模板解析其实就是根据被解析内容的特点使用正则等方式将有效信息解析提取出来,根据解析内容的不同分为HTML解析器,文本解析器和过滤器解析器。而文本信息与过滤器信息又存在于HTML标签中,所以在解析器主线函数parse中先调用HTML解析器parseHTML 函数对模板字符串进行解析,如果在解析过程中遇到文本或过滤器信息则再调用相应的解析器进行解析,最终完成对整个模板字符串的解析。

了解了模板解析阶段的整体运行流程后,接下来,我们就对流程中所涉及到的三种解析器分别深入分析,逐个击破。

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

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

相关文章

阿里云AliYun物联网平台使用-设备添加以及模拟设备端上云

一、前言 上一篇文章提到&#xff0c;我们已经申请了免费的阿里云平台&#xff0c;下面需要将我们的设备在阿里云上进行注册和申请&#xff0c;以便于我们的数据上云。 二、步骤 注册产品&#xff08;设备模型&#xff09; 在产品页面&#xff0c;点击 "创建产品" 。…

DevExpress WinForms TreeList控件,让业务数据展示更清晰!(一)

DevExpress WinForms的TreeList控件是一个功能齐全、数据感知的TreeView-ListView的混合体&#xff0c;它可以以树形、网格或两者结合的形式显示数据信息。无论是数据绑定模式还是非绑定模式&#xff0c;都具有完整的数据编辑支持。 PS&#xff1a;DevExpress WinForm拥有180组…

【测试开发】Junit 框架

目录 一. 认识 Junit 二. Junit 的常用注解 1. Test 2. Disabled 3. BeforeAll 4. AfterAll 5. BeforeEach 6. AfterEach 7. 执行测试 三. 参数化 1. 引入依赖 2. 单参数 3. 多参数 3.1 通过CSV实现 3.2 通过方法实现 4. 测试用例的执行顺序 四. 断言 五…

设计模式【结构型】-- 装饰者模式

装饰模式&#xff08;Decorator Pattern&#xff09; 定义 装饰者模式是一种结构型设计模式&#xff0c;它允许你动态地将新功能添加到对象中&#xff0c;通过将对象放入包含这些功能的特殊包装器对象中。这样一来&#xff0c;你可以在运行时通过组合不同的对象来扩展功能&…

用手机号注册亚马逊买家号需要注意什么问题

亚马逊平台的买家号可以用手机号注册也可以用邮箱进行注册&#xff0c;注册方法都是打开官网后点击注册&#xff0c;根据提示输入账号信息。当使用手机号注册亚马逊买家号时&#xff0c;有一些问题需要注意&#xff1a; 1、确保手机号的准确性&#xff1a;正确的手机号码非常重…

Android 系统的分区介绍

由于Android系统采用Linux架构&#xff0c;所以Android的系统分区可以类比同样采用Linux架构的操作系统&#xff08;如Windows&#xff09;。 Android系统分区分类 现在一般常见的Android分区方式共有三种&#xff0c;在不同的Android系统版本上会采用不同的分区方式。 1、传…

CentOS 7.8 Oracle 19C安装部署

CentOS 7.8 Oracle 19C安装部署 一、环境检查1、操作系统检查2、内存检查3、SWAP检查4、共享内存检查5、磁盘空间检查 二、YUM配置及RPM依赖包安装1、YUM源搭建2、 RPM依赖包安装 三、创建组、用户、目录1、创建组、用户2、创建目录 四、系统参数配置1、关闭防火墙2、配置域名解…

跟我一起从零开始学python(七)机器学习

前言 回顾之前讲了python语法编程 &#xff0c;必修入门基础和网络编程&#xff0c;多线程/多进程/协程等方面的内容&#xff0c;昨天和今天讲到了数据库编程篇MySQL&#xff0c;Redis今天第三篇MongoDB篇&#xff0c;前面没看的也不用往前翻&#xff0c;系列文已经整理好了&a…

【Axure高保真原型】美化滚动条模板

今天和大家分享美化滚动条的原型模板&#xff0c;包括美化动态面板滚动条、页面滚动条、内联框架滚动条&#xff0c;其中内联框架滚动条是通过美化对应调用的页面的滚动条而美化&#xff0c;并不是直接美化内联框架的滚动条。具体效果可以观看下方视频或者打开预览地址体验&…

个人微信开发API,微信机器人。

微信个人号二次开发&#xff0c;基于API开发可以有很多功能模块 各种知名SCRM系统、客服平台都是根据此API二次开发的。 在这里插入图片描述 好友管理&#xff1a; 添加好友、 删除好友、 修改备注、 创建标签、 获取好友列表、 检测僵尸粉 设置个人头像 同意添加好友 获取好…

【面试题38】linux下面chmod和chown使用详解

文章目录 一、前言二、什么是 chmod 命令&#xff1f;2.1 使用方法&#xff1a;2.2 数值表示法&#xff1a;2.3 符号表示法&#xff1a; 三、什么是 chown 命令&#xff1f;3.1 使用方法&#xff1a;3.2 更改所有者和用户组&#xff1a; 四、使用示例4.1 使用 chmod 命令修改权…

想要逼疯项目经理,真的太简单了

早上好&#xff0c;我是老原。 最近有个小友来找我吐槽&#xff0c;说太崩溃了&#xff0c;带个项目太不容易了…… 此情此景&#xff0c;我已经脑补了各种抱头痛哭流涕的画面&#xff0c;油然升起一股同情。 其实&#xff0c;项目经理&#xff0c;听起来是个经理&#xff0…

echarts条形图动态显示2

1、实现效果&#xff0c;条形图自动滚动&#xff0c;鼠标移入停止滚动&#xff0c;移出继续滚动 2、代码 声明的变量&#xff1a;图表&#xff0c;图表数据与定时器 myChartArea: , dataArea: {categoryData: [],valueData: [],fullData: [], }&#xff0c; timeOut: null,设…

【无公网IP端口映射】远程访问本地jupyter notebook服务

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…

Devchat让代码爽飞

Devchat让代码爽飞 安装python3安装vscode中安装devchat插件使用参考资料 devchat是一个免费的vscode插件&#xff0c;可以在vsocde中提示代码。 安装 devcha依赖于python3&#xff0c;首先需要再电脑中安装python3.然后在vscode中安装插件&#xff0c;然后利用python安装dev…

canal探索及应用

认识canal 译意为水道/管道/沟渠&#xff0c;主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量数据订阅和消费 早期阿里巴巴因为杭州和美国双机房部署&#xff0c;存在跨机房同步的业务需求&#xff0c;实现方式主要是基于业务 trigger 获取增量变更。从 2010 年…

冷门研究冒险家同济陈涵晟:让科技帮助未来人类拓展艺术边界

原来他们是这样走过来的&#xff01; 【AI红人荟】——这里是TechBeat人工智能社区为优秀的AI工作者开设的人物专访栏目。从膜拜“红人”到成为“红人”&#xff0c;TechBeat与你一起&#xff0c;在AI进阶之路上&#xff0c;升级打怪、完美通关~ 本篇人物&#xff0c;是来自同…

消息中间件RabbitMQ详解

一、 消息中间件 简介 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流&#xff0c;并基于数据通信来进行分布式系统的集成。通过提供消息传递和消息排队模型&#xff0c;它可以在分布式环境下扩展进程间的通信。 使用环境 消息中间件适用于需要可靠的数据传送…

超细整理,接口自动化测试-DDT参数化驱动实战,一招打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 ddt说明 一般进行…

MySQL数据库——索引练习

一、练习题目 1、建立一个utf8编码的数据库test1 2、建立商品表goods和栏目表category&#xff08;要求&#xff1a;按如下表结构创建表&#xff0c;并且存储引擎engine myisam 字符集charset utf8&#xff09; 3、删除 goods 表中的 goods_desc 字段及货号字段,并增加 click…