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

文章目录

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

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

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.hqwc.cn/news/18748.html

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

相关文章

Matrix Breakout:2 Morpheus（靶机详细渗透测试过程记录）

Matrix Breakout:2 Morpheus（靶机详细渗透测试过程记录）

nmap -sS -p 80 -oG - 192.168.192.0/24 | grep open 探测网段下开放80端口的主机。 扫描目录 发现该界面 存储型xss 发现file参数貌似可以控制读取文件目标。 尝试利用伪协议读取&#xff0c;文件内容。 解码&#xff0c;分析源代码&#xff1a; <?php$file"graff…
阅读更多...
Python基础综合案例-数据可视化(柱状图)

Python基础综合案例-数据可视化(柱状图)

今天给大家带来的是Python综合实战开发的数据可视化操作 通过python实现对数据的分析、可视化 数据来源:线上公布数据&#xff0c;需要可私信 前期准备工作&#xff1a;Python可视化准备工作 前期模块安装等前期基础的准备工作大家可以看我之前的文章讲解&#xff0c;有问题可…
阅读更多...
双向复制粘贴半监督医学图像分割

双向复制粘贴半监督医学图像分割

文章目录 Bidirectional Copy-Paste for Semi-Supervised Medical Image Segmentation摘要本文方法实验结果 Bidirectional Copy-Paste for Semi-Supervised Medical Image Segmentation 摘要 在半监督医学图像分割中&#xff0c;存在标记数据与未标记数据分布不匹配的问题。…
阅读更多...
Qt/C++音视频开发46-音视频同步保存到MP4

Qt/C++音视频开发46-音视频同步保存到MP4

一、前言 用ffmpeg单独做视频保存不难&#xff0c;单独做音频保存也不难&#xff0c;难的是音视频同步保存到MP4中&#xff0c;重点是音视频要同步&#xff0c;其实这也不难&#xff0c;只要播放那边音视频同步后的数据&#xff0c;写入到文件即可。最难的是在播放过程中不断随…
阅读更多...
使用 Docker 在 Windows、Mac 和 Linux 系统轻松部署 PostgreSQL 数据库

使用 Docker 在 Windows、Mac 和 Linux 系统轻松部署 PostgreSQL 数据库

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
数据库基础知识

数据库基础知识

在介绍数据库基础知识前先推荐大伙关注下博主开的拼多多小店:NICE时尚潮流男装。客服找我输入CSDN送10元无门槛抵用券&#xff0c;有任何技术问题也可以来店里找我&#xff0c;必回&#xff01; 店铺链接 https://mobile.yangkeduo.com/mall_page.html?_x_org2&refer_sh…
阅读更多...
Redis实战案例15-基于Redis实现分布式锁

Redis实战案例15-基于Redis实现分布式锁

1. 初级版本 注意自动拆箱时的空指针异常 public class SimpleRedisLock implements ILock{private StringRedisTemplate stringRedisTemplate;private String lockName;private static final String KEY_PREFIX "lock:";public SimpleRedisLock(StringRedisTemplat…
阅读更多...
设计模式——代理模式

设计模式——代理模式

代理模式&#xff08;静态代理&#xff09; 普通代理模式的核心就是&#xff0c;被代理对象和代理对象&#xff08;共属一个接口&#xff09;&#xff0c;被代理对象要执行的操作由代理对象完成&#xff08;此时被代理者需要手动new出来&#xff0c;再传递给代理者&#xff09…
阅读更多...
浅谈关于智慧校园安全用电监测系统的设计

浅谈关于智慧校园安全用电监测系统的设计

0引言 人生人身安全是大家关注的话题&#xff0c;2019年12月中国消防统计近五年发生在全国学生宿舍的火灾2314起&#xff08;中国消防2019.12.应急管理部消防救援局官方微博&#xff09;&#xff0c;违规电器是引发火灾的主因。如果在各寝室安装智能用电监测器实时监督线路参数…
阅读更多...
IntelliJ IDEA安装教程

IntelliJ IDEA安装教程

一、下载安装包 首先进入IDEA官网下载2021.2.1版本的安装包&#xff0c;不要问我为什么不下最新版&#xff0c;后面我会说。 二、安装与配置 打开安装包&#xff0c;安装完成后选择Evaluate for free&#xff08;免费试用&#xff09;&#xff0c;创建一个项目&#xff0c;进入…
阅读更多...
ELK 企业级日志分析系统----elk的部署

ELK 企业级日志分析系统----elk的部署

文章目录 一、ELK 简介1.1 ElasticSearch介绍1.2 ELK的组件ElasticSearchKiabanaLogstash可以添加的其它组件 1.3 为什么要使用 ELK1.4 完整日志系统基本特征1.5 ELK 的工作原理&#xff1a; 二、elk环境部署2.1 ELK Elasticsearch 集群部署&#xff08;在Node1、Node2节点上操…
阅读更多...
Django_模板标签语法

Django_模板标签语法

目录 引用变量 for循环标签 if条件标签 with标签 注释 extends和block标签 csrf_token标签 load static标签 源码等资料获取方法 引用变量 可以使用{{}}引用视图函数响应的变量和模板中的变量。 比如有如下视图函数 在模板中引用变量方式如下 界面展示如下 for循环标…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023