AST（Abstract Syntax Tree，抽象語法樹） - daniel-qa/Vue GitHub Wiki

Vue 裡面的 AST

Vue.js

Vue Template：

<div>{{ msg }}</div>

會先變成：

Template AST

再轉成：

render()

最後變 Virtual DOM。

AST 是程式碼在「被理解之後」形成的一種樹狀結構。

它不是原始文字，而是：

「程式語意」的結構化表示。

簡單說：

const a = 1 + 2

人類看到的是文字。

但編譯器、Linter、AI 工具、IDE 看到的其實是 AST。

AST 的核心概念

程式碼：

const a = 1 + 2

會被 Parser（語法解析器）轉成：

VariableDeclaration
├── kind: const
├── Identifier(a)
└── BinaryExpression(+)
    ├── Literal(1)
    └── Literal(2)

這就是 AST。

它把：

關鍵字
變數
運算
函式
if / for
class
import

全部轉成「節點（Node）」。

  • 為什麼叫「抽象」？

因為 AST 會：

保留「語意」

但忽略：

空白
換行
註解
排版

例如：

const a=1+2

跟：

const a = 1 + 2

AST 幾乎一樣。

因為它們的「意思」相同。

  • AST 的流程

通常：

Source Code
    ↓
Lexer（詞法分析）
    ↓
Parser（語法分析）
    ↓
AST
    ↓
Compiler / Transformer
    ↓
Machine Code / JS / Bytecode

AST 在前端的應用

Vue / React / TypeScript 幾乎到處都在用 AST。

1. Babel

Babel 會：

const add = (a, b) => a + b

轉成：

var add = function(a, b) {
  return a + b
}

流程：

JS Code
→ AST
→ 修改 AST
→ 重新輸出 Code

這叫：

AST Transform（語法樹轉換）

2. TypeScript

TypeScript 編譯器會：

建 AST
做型別分析
做語法檢查
emit JS

所以：

const x: number = "abc"

才能報錯。

3. ESLint

ESLint 本質：

讀 AST
→ 檢查規則
→ 找錯誤

例如：

if (a == b)

規則：

BinaryExpression
operator == 
→ error

4. Prettier

Code
→ AST
→ 重新生成格式化程式碼

所以它不只是字串 replace。

⚠️ **GitHub.com Fallback** ⚠️