【Vue2深度学习】模板编译篇-解析器

在前面的学习中，我们知道，Vue的模板编译，分为解析器、优化器、代码生成器三个模块依次来实现。今天，我们先来深入了解一下解析器。

解析器，就是把<template></template>模板，根据一定的解析规则解析出有效的信息，最后用这些信息形成AST（保存了节点所需的各种数据的一个JS对象）。

在模板内，除了有常规的HTML标签外，还会有一些文本信息以及在文本信息中包含的过滤器。这些不同的内容在解析起来需要不同的解析规则，所以解析器不只一个，除了有解析常规HTML的HTML解析器，还有解析文本的文本解析器以及解析过滤器的过滤器解析器。

运行流程

既然解析器有多个，那么它们是怎么串联运行的？

因为文本信息和过滤器存在于HTML标签之内，所以先用HTML解析器解析整个模板，在解析过程中如果碰到文本内容，那就调用文本解析器来解析文本，如果碰到文本中包含过滤器那就调用过滤器解析器来解析。

具体到Vue代码中，parse 函数就是解析器的主函数，在parse 函数内调用了parseHTML 函数对模板字符串进行解析，在parseHTML 函数解析模板字符串的过程中，如果遇到文本信息，就会调用文本解析器parseText函数进行文本解析；如果遇到文本中包含过滤器，就会调用过滤器解析器parseFilters函数进行解析。

运行原理