当前位置：首页 > news >正文

【vue】vue 是怎么把 template 模版编译成 render 函数的，什么是AST抽象语法树

news 来源：原创 2025/4/28 4:30:41

什么是AST 抽象语法树

是一个对象/或者json
是一个数据结构
AST通常是由多个节点组成的树状结构，每个节点代表一个语法单位或表达式。节点之间的关系通过父子关系或兄弟关系来表示程序的结构。在不同的编程语言和工具中，AST可能有不同的表示方式和节点类型。

const ast = {
  type: "Program",
  body: [
    {
      type: "FunctionDeclaration",
      id: {
        type: "Identifier",
        name: "add"
      },
      params: [
        {
          type: "Identifier",
          name: "a"
        },
        {
          type: "Identifier",
          name: "b"
        }
      ],
      body: {
        type: "BlockStatement",
        body: [
          {
            type: "ReturnStatement",
            argument: {
              type: "BinaryExpression",
              operator: "+",
              left: {
                type: "Identifier",
                name: "a"
              },
              right: {
                type: "Identifier",
                name: "b"
              }
            }
          }
        ]
      }
    },
    {
      type: "VariableDeclaration",
      declarations: [
        {
          type: "VariableDeclarator",
          id: {
            type: "Identifier",
            name: "result"
          },
          init: {
            type: "CallExpression",
            callee: {
              type: "Identifier",
              name: "add"
            },
            arguments: [
              {
                type: "Literal",
                value: 2
              },
              {
                type: "Literal",
                value: 3
              }
            ]
          }
        }
      ],
      kind: "let"
    },
    {
      type: "ExpressionStatement",
      expression: {
        type: "CallExpression",
        callee: {
          type: "MemberExpression",
          object: {
            type: "Identifier",
            name: "console"
          },
          property: {
            type: "Identifier",
            name: "log"
          },
          computed: false
        },
        arguments: [
          {
            type: "Identifier",
            name: "result"
          }
        ]
      }
    }
  ],
  sourceType: "script"
};

console.log(ast);

抽象语法树（Abstract Syntax Tree，AST）是源代码的抽象语法结构的树状表示形式。它是编译器、解释器等程序中常用的一种数据结构，用于表示编程语言的语法结构，方便进行语法分析、语义分析以及代码转换等操作。

在编译器的工作流程中，源代码首先会被分词器（Tokenizer）或词法分析器（Lexer）处理，将代码分割成一个个的词法单元（Tokens）。接着，这些词法单元会被传递给语法分析器（Parser），语法分析器会根据语言的语法规则将这些词法单元组织成一个树状结构，这个结构就是抽象语法树。

抽象语法树的节点代表了源代码中的语法结构，例如表达式、语句、函数定义等。每个节点通常包含以下信息：

类型（Type）：节点表示的语法结构的类型，例如表达式、函数声明等。
值（Value）：节点对应的词法单元的值，例如变量名、操作符等。
子节点（Children）：子节点表示了当前节点的子结构，它们可以是其他节点，这样就形成了树的分支。

通过遍历抽象语法树，编译器可以进行诸如优化、转换、生成目标代码等操作。在 JavaScript 生态系统中，许多工具（如 Babel、ESLint 等）都会使用 AST 来进行代码转换、静态分析等操作。在编程语言的学习和理解过程中，理解抽象语法树有助于深入理解语言的语法和结构。

vue 是怎么把 template 模版编译成 render 函数的

模板解析（Parsing）：Vue 会先将模板字符串解析成抽象语法树（AST），这个过程由模板编译器完成。AST 是对模板结构的抽象表示，它描述了模板中各个元素的类型、属性、子节点等信息。

静态分析（Static Analysis）：Vue 会对 AST 进行静态分析，识别出模板中的静态节点（Static Node）和动态节点（Dynamic Node）。静态节点是在编译阶段就可以确定其内容的节点，而动态节点的内容是在运行时确定的，比如包含变量或表达式的节点。

优化（Optimization）：Vue 会对 AST 进行优化，主要是优化静态节点的生成和更新，以提升渲染性能。Vue 3 中引入了基于静态分析的优化策略，可以进一步提高渲染性能。

代码生成（Code Generation）：根据优化后的 AST，Vue 将生成渲染函数的代码。这个过程会根据模板的结构和内容，生成一段 JavaScript 代码，这段代码负责将组件的数据状态映射到 DOM 元素上，并处理组件的更新和交互逻辑。

缓存（Caching）：Vue 会对生成的渲染函数进行缓存，以提高性能。对于同一个模板，Vue 只会进行一次编译，并将编译结果缓存起来，在下次渲染相同模板时直接使用缓存的渲染函数，避免重复的编译过程。

总的来说，Vue 将模板编译成渲染函数的过程是一个将静态模板转换为动态渲染逻辑的过程，它包括模板解析、静态分析、优化和代码生成等步骤，最终生成一个渲染函数，用于渲染组件并处理组件的更新。