Vue 3 Template Compiler, AST, PatchFlags & Hoisting Interactive Visualizer

Q: What are the 3 core stages of the Vue 3 template compiler?

1. Parse (baseParse): Tokenizes the raw template string via a finite state machine and constructs the Template AST. 2. Transform: Traverses the AST to apply directive transforms, hoist static trees (_hoisted_*), compute bitwise PatchFlags, and collect dynamic children into a Block Tree. 3. Generate: Emits the final JavaScript render(_ctx, _cache) function.

Q: How do bitwise PatchFlags accelerate Virtual DOM diffing?

By encoding dynamic bindings as powers of two (TEXT = 1, CLASS = 2, STYLE = 4, PROPS = 8), the compiler combines multiple dynamic traits via bitwise OR (|), and the runtime renderer checks them in O(1) time via bitwise AND (&), completely bypassing static attribute comparisons.

Interactive Rust Wasm sandbox visualizing how Vue 3 compiles SFC templates into Lexical Tokens, Template AST, Static Hoisting (_hoisted), and bitwise PatchFlags.

Lexical Analysis (Tokenizer)0 Tokens

→

Syntax Parse (Template AST)1 AST Nodes

→

Transform & Hoisting0 Hoisted · 0 Dynamic Nodes

→

Codegen (Render Function)Block Tree + PatchFlags

🎯 Quick Presets:

📝 Vue 3 SFC <template> Input⚡ Real-Time Wasm AST

<template>
  <div class="user-card" :class="themeMode">
    <header class="static-banner">⚡ VIP 静态徽章（自动静态提升）</header>
    <p class="greeting">Hello {{ userName }}!</p>
    <button :disabled="isLocked" @click="handleSend">发送消息</button>
  </div>
</template>

🎯 Active PatchFlags Bitmask Inspector

TEXT1 << 0 (1)

Dynamic text content

CLASS1 << 1 (2)

Dynamic class binding

STYLE1 << 2 (4)

Dynamic style binding

PROPS1 << 3 (8)

Dynamic non-class/style props

STABLE_FRAGMENT1 << 6 (64)

Fragment with stable child order

KEYED_FRAGMENT1 << 7 (128)

Fragment with keyed children (v-for)

HOISTED-1

Static node hoisted outside render()

⚡ Generated JS Render Function (`generate`)Notice _hoisted_* outside render() and numeric PatchFlags comments

// Loading Rust Wasm Vue 3 Compiler Engine...

🌳 Template AST & JS Transform Annotations (`parse` + `transform`)

Root (0)ROOTBlock Tree Root

🧩 Lexical Token Stream (`baseParse` Tokenizer)

💡 Recommended Developer Resources & Cost SaversPartner Links · Zero Extra Cost to You

🚀 Edge Full-Stack HostingGlobal 300+ PoPs

Cloudflare Workers & Static Assets

Deploy Vue 3, Nuxt, and Astro apps globally with zero cold starts, built-in HTTP/3 QUIC, and free SSL.

Deploy on Cloudflare Workers →

🔥 25% Exclusive Rebate25% Off First Purchase

Alibaba Cloud · 25% Exclusive Discount Campaign

Creator subsidies 20% commission + platform 5% rebate = 25% exclusive discount for new users on ECS cloud servers, OSS, and Model Studio.

Claim 25% Off Voucher →

🔥 Unified LLM API GatewayFree Credits Included

SiliconFlow & OpenRouter — 100+ LLMs via One OpenAI-Compatible Key

Access DeepSeek-R1, Claude 3.7, GPT-4o, and Qwen with high concurrency and automatic prompt caching.

Claim Free API Credits →

Inside Vue 3 Compile-Time Optimizations: Block Tree & Bitwise PatchFlags

This interactive visualizer accompanies the technical deep-dive series on Vue 3 compiler architecture. Edit the template or switch presets above to inspect how @vue/compiler-core transforms declarative templates into high-performance Block Tree render functions.

Frequently Asked Questions (FAQ)

Q1 What are the 3 core stages of the Vue 3 template compiler?

Parse (baseParse)： Tokenizes the raw template string via a finite state machine and constructs the Template AST.

Transform： Traverses the AST to apply directive transforms, hoist static trees (_hoisted_*), compute bitwise PatchFlags, and collect dynamic children into a Block Tree.

Generate： Emits the final JavaScript render(_ctx, _cache) function.

Q2 How do bitwise PatchFlags accelerate Virtual DOM diffing?

By encoding dynamic bindings as powers of two (TEXT = 1, CLASS = 2, STYLE = 4, PROPS = 8), the compiler combines multiple dynamic traits via bitwise OR (|), and the runtime renderer checks them in O(1) time via bitwise AND (&), completely bypassing static attribute comparisons.