猿创征文 |《深入浅出Vue.js》打卡Day4

第8章 模板编译

模板编译 所介绍的内容是如何让虚拟DOM拿到vnode，下图给出了模板编译在整个渲染过程中的位置

模板编译的主要目标就是生成渲染函数，而渲染函数的作用是每次执行它，它就会使用当前最新的状态生成一份新的vnode，然后使用这个vnode进行渲染。

模板编译分三部分内容：

• 将模板解析为AST——解析器
• 遍历AST标记静态节点——优化器
• 使用AST生成渲染函数——代码生成器
  

解析器

解析器只实现一个功能，那就是将模板解析成AST。
在解析器内部，分成了很多小解析器，其中包括过滤器解析器、文本解析器和HTML解析器，然后通过一条主线将这些解析器组装在一起。

• 过滤解析器的作用就是用来解析过滤器的；
• 文本解析器的主要作用是用来解析带变量的文本；

例如：Hello{{name}} // name就是变量，而这样的文本叫做带变量的文本。如果不带变量的文本是一段纯文本，不需要使用文本解析器来解析

• HTML解析器，它是解析器最核心的模块，它的作用就是解析模板

主线上做的事情就是监听HTML解析器。每当触发钩子函数时，就生成一个对应的AST节点。生成AST前，会根据类型使用不同的方式生成不同的AST。例如，如果是文本节点，就生成文本类型的AST。当HTML解析器把所有模板都解析完毕后，AST也就生成好了。

优化器

优化器的目标是遍历AST，检测出所有的静态子树（永远不会发生变化的DOM节点）并给其打标记。
当AST中的静态子树被打上标记后，每次重新渲染时，就不需要为打上标记的静态节点创建新的虚拟节点，而是直接克隆也存在的虚拟节点。除了首次渲染之外，后续不需要任何重新渲染操作。

代码生成器

代码生成器，它的作用是将AST转换成渲染函数中的内容，这个内容可以称为 “代码字符串”，这样的代码字符串最终导出到外界使用时，会将代码字符串放到函数里，这个函数叫做渲染函数。当渲染函数被导出到外界后，模板编译就任务就完成了。

渲染函数的作用就是创建vnode。