邢台网站制作报价多少钱,常用的网络营销推广方法有哪些,免费商城自助建站,秦皇岛的网站建设公司目录 1. 前言
2. 什么是模板编译
3. 整体渲染流程
4. 模板编译内部流程
4.1 抽象语法树AST
4.2 具体流程
5. 总结 1. 前言
在前几篇文章中#xff0c;我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程#xff0c;而虚拟DOM存在的必要条件是得先有VNode…目录 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来说就是一堆字符串那么如何解析这一堆字符串并且从中提取出元素的标签、属性、变量插值等有效信息呢这就需要借助一个叫做抽象语法树的东西。
所谓抽象语法树在计算机科学中抽象语法树AbstractSyntaxTreeAST或简称语法树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.renderstaticRenderFns 的值为code.staticRenderFns也就是说通过 generate处理 ast之后得到的返回值 code 是一个对象。
下面再给出模板编译内部具体流程图便于理解。流程图如下 5. 总结
本篇文章首先引出了为什么会有模板编译因为有了模板编译才有了虚拟DOM才有了后续的视图更新。接着介绍了什么是模板编译以及介绍了把用户所写的模板经过层层处理直到最终渲染的视图中这个整体的渲染流程最后介绍了模板编译过程中所需要使用的抽象语法树的概念以及分析了模板编译的具体实施流程其流程大致分为三个阶段分别是模板解析阶段、优化阶段和代码生成阶段。那么接下来的几篇文章将会把这三个阶段逐一进行分析介绍。
