[Vue源码解析] 解析器

最新推荐文章于 2022-10-28 15:25:42 发布

挣钱去植发

最新推荐文章于 2022-10-28 15:25:42 发布

阅读量288

点赞数

分类专栏： Vue js

本文链接：https://blog.csdn.net/qq_42465117/article/details/110265230

版权

本文详细介绍了Vue解析器的工作原理，包括HTML、文本和注释解析器。通过正则表达式识别AST节点类型，如元素标签、属性等，并利用栈来维护DOM层级结构。在处理文本时，尤其关注带变量的表达式，使用正则进行逻辑判断。解析过程最终生成一棵AST树。

摘要由CSDN通过智能技术生成

[Vue源码解析] 解析器

解析器类型：HTML解析器、文本解析器、注释解析器

原理：将模版字符串按照一定的条件循环进行切割，对切割下来的内容进行类型判断，在生产对应类型的AST节点插入到父节点上，直到切割完毕最终生成一颗AST树。

逻辑概览：

/**
 * 整体逻辑
 */

export function parseHTML (html, options) {
   
  while (html) {
   
    if (!lastTag || !isPlainTextElement(lastTag)) {
   
      let textEnd = html.indexOf('<')
      if (textEnd === 0) {
   
        //注释
        if (Comment.test(html)) {
   
          //注释的处理逻辑
          continue
        }

        //条件注释
        if (conditionalComment.test(html