前端vue自学总结Week04——模板编译篇

自述总结：模板编译就是把我们在template标签中写的类似与原生的HTML标签进行编译，把原生的HTML内容找出来，非原生的HTML内容也找出来，经过一系列的逻辑处理变成渲染函数，也就是render（）函数，通过render函数会将模板内容生成对应的VNode，VNode再经过patch过程变成将在视图渲染中的VNode,而把用户在<template></template>标签中写的类似于原生HTML的内容进行编译，把原生HTML的内容找出来，再把非原生HTML找出来，经过一系列的逻辑处理生成渲染函数，也就是render函数的这一段过程称之为模板编译过程。

抽象语法树（AST）:借助该工具，将template标签中一堆字符串，提取出元素的标签，属性，变量插值等有效信息。

具体流程：分成三个阶段，分别是模板解析阶段，优化阶段，代码生成阶段。
1、模板解析阶段（解析器）：用正则等方式解析 template 模板中的指令、class、style等数据，形成AST
2、优化阶段（优化器）：遍历AST，找出其中的静态节点，并打上标记；
3、代码生成阶段（代码生成器）：将AST转换成渲染函数；

模板解析阶段

自述总结：根据文本内容，使用正则表达式将有效信息提取出来，，根据解析内容的不同，分成HTML解析器，文本解析器和过滤解析器，而文本解析器和过滤解析器又存在于HTML标签中，所以解析器主线函数parse先调用HTML解析器对整个字符串模板进行解析，如果解析的过程中遇到文本或过滤信息则再调用相应的解析器进行解析，最终完成对整个模板的解析。

HTML解析器（parseHTML）

自述总结：根据解析不同的内容，对应调用不同的钩子函数生成对应的AST节点，最终将整个模板字符串都转化成AST。

文本解析器（parseText）

自述总结：就是将parseHTML中解析得到的文本内容进行二次解析，解析文本内容中是否包含变量，如果包含变量，则将变量提取出来进行加工，为后续的生产render函数做准备。

优化阶段
自述总结：在AST中找出所有静态节点和静态根节点并打上标记，为了提高虚拟DOM中patch过程的性能，这样可以直接在patch过程中可以跳过这些节点。

代码生成阶段（即将AST生成一个函数，通过调用整个函数，就可以得到模板对应的虚拟DOM）

AST生成render函数

自述总结：根据当前 AST 元素节点属性的不同从而执行不同的代码生成函数，但是真正创建出来的VNode无非就三种，元素节点，文本节点，注释节点。

元素节点

自述总结：先是获取节点的属性data，然后获取子节点列表children，也就是遍历AST的children属性中的元素，然后根据元素属性的不同生成不同的VNode创建函数调用字符串，最后生成_c（）函数调用字符串。

文本节点

自述总结：生成_v(text)函数调用的字符串，_v()函数接收文本内容作为参数，如果文本是动态文本，则使用动态文本AST节点的expression属性，如果是纯静态文本，则使用text属性。

注释节点

自述总结：生成一个_e(text)函数调用的字符串。_e()函数接收注释内容作为参数。