為什麼要有 Template?

解鎖 Vue Template 成因，並探索源碼

Aaron Shih

@eepson123tw

Loading comments...

因 Vue 讀書會的關係，重新來探索 Component 中的 Template 是什麼？抑或者 Template 幫我們解決了什麼問題？

現代前端的複雜應用

想像一下，如果沒有像 Vue Template 這樣的工具，我們要怎麼更新網頁上的文字或圖片呢？在傳統的前端開發中，我們可能需要這樣做：

用 JavaScript 找到那個網頁元素 (例如：document.getElementById('myText'))。

然後手動去改變它的內容 (例如：element.innerHTML = '新的文字')。

如果網頁很複雜，有很多地方需要根據資料變化，這樣手動操作會變得非常痛苦，而且很容易出錯。每當資料更新，開發者就必須編寫指令來精確地告訴瀏覽器如何更新每一個相關的 DOM 元素。這種命令式的編程方式不僅繁瑣，而且隨著應用規模的擴大，程式碼的可維護性會急劇下降。

Vue Template & React JSX 在做什麼？

為了上述問題，現代前端框架如 Vue 和 React 引入了更先進的 UI 構建方式。Vue Template (以及 React 中的 JSX) 的核心目標，就是讓我們可以用一種更「聲明式」的方式來開發：

專注於「結果」，而非「過程」：你只需要告訴框架「我希望這個地方顯示這個資料，長這個樣子」，而不用去管框架內部是如何找到元素、如何更新的。框架會自動幫你搞定這些繁瑣的 DOM 操作。

資料驅動畫面：當你的資料改變時，畫面會自動跟著更新。透過框架強大的「響應式系統」實現的。不需要再手動去更新畫面，省時又省力！
程式碼更簡潔易懂：Vue Template 基於 HTML，這意味著所有 Vue 模板本身都是合法的 HTML。你可以像寫普通 HTML 一樣去寫 Vue 模板，瀏覽器也能正確解析它。這讓它非常容易上手，看起來就像是增強版的 HTML，非常直觀。
組件化開發：現代框架都鼓勵我們把網頁拆分成一個個可重複使用的「組件」。模板語法在組件中扮演著定義結構和內容的角色，讓組件化開發更加得心應手。
高效能：框架在背後做了很多優化，例如「虛擬 DOM」和「編譯時優化」，確保即便在複雜的應用中，畫面更新也能保持高效更新。

AST 抽象語法樹

你可能會好奇，我們寫的那些看起來像 HTML 的 Vue 模板，Vue 到底是怎麼把它變成真實的網頁畫面的呢？第一步，就是將模板解析成「抽象語法樹」(Abstract Syntax Tree, AST)。

AST 是什麼：

首先，Vue 的編譯器會把你寫的模板字串 (就是你在 <template> 標籤裡寫的那些東西) 讀進來。
然後，它會像個細心的語文老師一樣，把這段文字分解成一個個有意義的「詞彙」或「標記」(Tokens)，例如 HTML 標籤、文字內容、Vue 的特殊指令等等。
接著，Vue 會根據這些標記，建立一個樹狀的 JavaScript 物件結構，這就是 AST。你可以把 AST 想像成模板的「骨架藍圖」或「結構圖」，它精確地描述了你的模板長什麼樣子，哪裡是標籤，哪裡是文字，哪裡有綁定資料，元素之間的層級關係等等。

例如，對於模板 <div id="app"><p>{{ message }}</p></div>，AST 可能會描述有一個 div 元素，它有一個 id 屬性值為 app，並且它有一個子元素 p，而 p 元素內部有一個文本插值，其內容是 message 變數。

為什麼重要：AST 是後續優化和程式碼生成的基礎。沒有 AST，編譯器就無法理解模板的結構和意圖。Vue 的編譯器會遍歷這個 AST，分析哪些部分是靜態的、哪些是動態的，為後續的優化和渲染函數生成做好準備。

// AST 結構範例：<div id="app"><p>{{ message }}</p></div>
const ast = {
  type: 'Element',
  tag: 'div',
  props: [
    {
      type: 'Attribute',
      name: 'id',
      value: {
        type: 'Literal',
        value: 'app'
      }
    }
  ],
  children: [
    {
      type: 'Element',
      tag: 'p',
      props: [],
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: 'message',
            isStatic: false
          }
        }
      ]
    }
  ]
}

Compile 編譯器

有了 AST 這個結構化的模板表示之後，Vue 的「編譯器」(Compiler) 就會接手進行下一步的工作。

編譯過程是 Vue 高效能的關鍵之一，它指的是從原始模板字串到最終生成渲染函數的整個轉換過程。

編譯器的主要職責包括：

解析 (Parsing)：這是第一步，即將模板字串轉換為 AST (已在上一節討論)。
優化 (Optimization)：在拿到 AST 之後，編譯器會開始進行「優化」。它會遍歷 AST，分析並找出哪些部分是「靜態的」(也就是內容在渲染過程中永遠不會改變的)，哪些部分是「動態的」(內容會根據資料變化的)。
靜態節點提升：對於完全靜態的部分，Vue 會把它們標記起來，甚至直接提升 (hoist) 出來。這樣在後續畫面更新時，就可以完全跳過這些靜態部分，不用浪費時間去比較它們有沒有變化，大大提升效能。
補丁標誌 (Patch Flags)：對於動態的部分 (例如帶有 v-if, v-for, 或綁定表達式的元素)，編譯器也會做一些標記。這些「補丁標誌」會記錄下這個動態節點將來可能需要進行哪些類型的更新 (例如，只是文本內容變了？還是 class 變了？或是子元素順序變了？)。這樣在運行時進行虛擬 DOM 比對 (Diffing) 時，Vue 就能非常精準地只做必要的更新，而不是盲目地比較所有東西。
樹結構打平 (Tree Flattening)：編譯器會識別模板中的「區塊」(blocks)，這些區塊具有穩定的內部結構。對於每個區塊，編譯器會將其內部的動態後代節點提取出來，形成一個扁平化的陣列。當組件重新渲染時，它只需遍歷這個扁平化的動態節點列表，有效地跳過靜態部分，極大地減少了需要協調的節點數量。
程式碼生成 (Code Generation)：優化完畢後，編譯器會根據優化後的 AST，生成一段 JavaScript 程式碼。這段程式碼通常是一個「渲染函數」(Render Function)。

編譯的最終產物就是一個高度優化的渲染函數。這整個過程大部分是在「建構階段」(例如你用 npm run build 打包專案時) 就完成了 (AOT, Ahead-of-Time compilation)，所以應用在瀏覽器中執行時的效能非常好。

// 編譯過程範例：<div id="app"><p>{{ message }}</p></div>
function compile(template) {
  // Step 1: 解析模板為 AST
  const ast = parse(template)
  
  // Step 2: 轉換和優化 AST
  const optimizedAst = transform(ast, {
    // 標記靜態節點
    hoistStatic: true,
    // 為動態內容生成補丁標誌
    patchFlag: true
  })
  
  // Step 3: 生成渲染函數程式碼
  const renderFunctionCode = generate(optimizedAst)
  
  return renderFunctionCode
}

// 生成的渲染函數 (簡化版)
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", {
    id: "app"
  }, [
    _createElementVNode("p", null, 
      _toDisplayString(_ctx.message), // 動態內容，帶有補丁標誌
      1 /* TEXT */ // 補丁標誌，表示文本內容變化
    )
  ]))
}

// 優化分析：
// - div 元素和 id="app" 是靜態的 (不會改變)
// - p 元素結構是靜態的
// - 只有 {{ message }} 是動態的，需要響應式追蹤

Render 渲染器

編譯器生成的「渲染函數」(Render Function) 是 Vue 響應式系統和虛擬 DOM 機制的核心。

渲染函數是什麼：它是一個 JavaScript 函數。當這個函數被執行時，它會回傳一個描述當前畫面應該長什麼樣子的「虛擬 DOM 樹」(Virtual DOM Tree)。虛擬 DOM 是一個用 JavaScript 物件來表示真實 DOM 結構的概念，它比直接操作真實 DOM 更有效率。

渲染器如何工作 (渲染與響應式更新)：

生成虛擬 DOM：當你的應用程式啟動或組件的資料發生變化時，Vue 就會執行對應組件的渲染函數，得到一個新的虛擬 DOM 樹。
比對差異 (Diffing)：Vue 的渲染器會比較新的虛擬 DOM 樹和上一次渲染時的舊虛擬 DOM 樹之間的差異。這個比對過程 (Diffing algorithm) 非常高效，它能夠快速找出真正需要改變的部分。
應用補丁 (Patching)：然後，Vue 只會把這些「真正有變化」的部分更新到實際的網頁 DOM 上。這個過程稱為「打補丁」(Patching)。

所以，整個流程可以總結為：

模板字串 → Compile (編譯器) 進行 → 解析成 AST → 優化 AST → 生成 Render Function → Render Function 執行後產生 → 虛擬 DOM → Vue 渲染器進行 Diff 和 Patch → 真實 DOM 更新

理解了這個流程，你就能明白為什麼 Vue 既能提供友好的模板語法，又能保持出色的運行效能了。開發者也可以選擇手寫渲染函數 (通常使用 JSX 或 h() 輔助函數)，這在需要極致編程控制渲染邏輯的場景下很有用。不過，由於模板語法有編譯器的靜態分析和優化加持，通常是更推薦的選擇。

Vue Template Syntax Sugar 模板語法糖

Vue 模板語法提供了一些非常方便的「語法糖」(Syntactic Sugar)，它們讓我們用更少的程式碼完成更多的事情，使程式碼更簡潔、更易讀。這裡介紹幾個常用的：

v-bind 的簡寫

當我們想把一個資料綁定到 HTML 元素的屬性上時，會使用 v-bind 指令。

<!-- 完整寫法 -->
<img v-bind:src="imageUrl">

<!-- 簡寫形式 -->
<img :src="imageUrl">

是不是清爽多了？幾乎所有 v-bind 的場景都可以使用冒號簡寫。

v-on 的簡寫 @

當我們想監聽 DOM 事件 (例如點擊、輸入等) 並執行某些 JavaScript 程式碼時，會使用 v-on 指令。

<!-- 完整寫法 -->
<button v-on:click="sayHello">點我</button>

<!-- 簡寫形式 -->
<button @click="sayHello">點我</button>

同樣非常方便！

v-if, v-else-if, v-else：條件渲染

這組指令讓我們可以根據條件來決定是否渲染某個元素或某一段模板。

v-if="condition"：只有當 condition 為真時，元素才會被渲染。
v-else-if="anotherCondition"：如果前面的 v-if 或 v-else-if 不成立，且 anotherCondition 為真時，元素才會被渲染。
v-else：如果前面所有的 v-if 和 v-else-if 都不成立，則渲染這個元素。

<div v-if="type === 'A'">
  A 類型內容
</div>
<div v-else-if="type === 'B'">
  B 類型內容
</div>
<div v-else>
  其他類型內容
</div>

注意：v-else 和 v-else-if 必須緊跟在 v-if 或 v-else-if 元素的後面。

與 v-show 的區別：v-if 是「真正」的條件渲染，如果條件為假，元素及其子組件會被銷毀和移除；而 v-show 只是簡單地切換元素的 CSS display 屬性，元素始終保留在 DOM 中。頻繁切換顯示狀態時，v-show 效能較好；條件很少改變時，v-if 的初始渲染開銷可能更小。

v-for：列表渲染

當我們需要根據一個陣列或物件來渲染一個列表時，v-for 就派上用場了。

遍歷陣列：v-for="item in items" 或 v-for="(item, index) in items"

<!-- 遍歷陣列 -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</li>

items 是你的資料陣列，item 是陣列中的每個元素，index (可選) 是元素的索引。

遍歷物件：v-for="value in object" 或 v-for="(value, key) in object" 或 v-for="(value, key, index) in object"

<!-- 遍歷物件 -->
<li v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</li>

object 是你的資料物件，value 是屬性的值，key (可選) 是屬性的鍵名，index (可選) 是索引。

key 的重要性：在使用 v-for 時，強烈建議為每個被遍歷的元素綁定一個唯一的 key 屬性 (例如 :key="item.id")。這能幫助 Vue 更高效地識別和重排元素，尤其是在列表順序改變或有增刪操作時。

v-model：雙向數據綁定

v-model 通常用在表單元素上(如 <input>, <textarea>, <select>)，它能輕鬆實現表單輸入的值和 Vue 實例中資料的雙向同步。

當你在輸入框裡打字時，對應的資料會自動更新；反之，如果資料改變了，輸入框裡的內容也會自動更新。

<input v-model="message" placeholder="輸入訊息">
<p>訊息是: {{ message }}</p>

v-model 其實是 v-bind:value 和 v-on:input (或其他事件，取決於表單元素類型) 的語法糖。

v-html：輸出原始 HTML

雙大括號 {{ }} 會將資料作為純文本輸出。如果你想讓一段資料作為 HTML 被渲染，就需要使用 v-html。

<div v-html="rawHtmlContent"></div>

安全警告：動態渲染任意 HTML 是非常危險的，因為它很容易導致 XSS (跨站腳本攻擊)。所以，請確保你只對「可信任的內容」使用 v-html，絕對不要用它來渲染使用者提交的內容。

v-once：一次性渲染

如果某部分內容在初次渲染後就不再需要更新了，可以使用 v-once 指令。

這會告訴 Vue 這個元素和它的所有子元素都只渲染一次。當資料變化時，這部分內容不會重新渲染，可以作為一種性能優化手段。

<span v-once>這段文字只渲染一次：{{ initialMessage }}</span>

這些語法糖大大簡化了我們的開發工作，讓我們能用更少的程式碼完成更多的事情。

Source Code 源碼

理解 Vue Template 如何運作，其實就是在探索其源碼設計的核心思想。雖然直接深入閱讀 Vue 的完整原始碼對於初學者來說可能有些挑戰，但我們可以從其核心模組的功能來窺探一二：

@vue/compiler-core: 這是 Vue 編譯器的核心，負責將模板字串解析成 AST，進行各種靜態分析和優化，並最終生成渲染函數的程式碼。它是一個平台無關的編譯器。
@vue/compiler-dom: 這個包是在 @vue/compiler-core 的基礎上，增加了針對瀏覽器 DOM 環境的特定處理邏輯。例如，它知道如何處理 HTML 特有的標籤和屬性。
@vue/runtime-core: 包含了 Vue 運行時的核心邏輯，如虛擬 DOM 的創建、Diff 演算法、組件的生命週期管理、響應式系統的實現等。渲染器 (Renderer) 的核心邏輯也在此。
@vue/runtime-dom: 此包提供了針對瀏覽器環境的運行時支持，例如操作真實 DOM 的 API，處理 DOM 事件等。

@vue/compiler-core

@vue/compiler-dom

@vue/runtime-core

@vue/runtime-dom

// 核心編譯器 - 解析模板為 AST
import { parse, transform, generate } from '@vue/compiler-core'

const template = '<div>{{ message }}</div>'

// 解析模板為 AST
const ast = parse(template)
console.log('AST:', ast)

// 轉換和優化 AST
const transformedAst = transform(ast, {
  nodeTransforms: [/* 各種轉換器 */],
  directiveTransforms: {/* 指令轉換器 */}
})

// 生成渲染函數程式碼
const { code } = generate(transformedAst)
console.log('Generated code:', code)

Conclusion 結語

Vue 的模板語法是其核心魅力之一。它不僅讓前端開發變得更加直觀和高效，其背後的編譯優化和響應式系統也保證了應用的高性能。從解決現代前端應用的複雜性出發，Vue Template 提供了一套優雅的聲明式 UI 解決方案。

透過理解 AST、編譯器、渲染器這些核心概念，我們能夠揭開 Vue Template 運作的神秘面紗。這些機制協同工作，將我們編寫的類 HTML 模板，高效地轉換為能夠響應數據變化的動態網頁。而各種語法糖則進一步提升了我們的開發體驗。

希望透過這篇文章，你對 Vue Template 的成因、運作原理以及常用的語法糖都有了更清晰的認識。掌握好模板語法，你就能更自如地駕馭 Vue，打造出互動豐富、體驗流暢的網頁應用！

核心要點回顧：

解決問題：Vue Template 解決了傳統 DOM 操作的複雜性和可維護性問題
聲明式開發：專注於描述「想要什麼」而非「如何做」
編譯優化：透過 AST 解析、靜態分析和程式碼生成實現高效能
響應式更新：資料變化自動驅動視圖更新
開發體驗：豐富的語法糖讓開發更加簡潔高效

Vue Template 不僅是一個模板引擎，更是現代前端開發的最佳實踐體現！

Loading comments...

Watch & Computed

探索 Watch 和 Computed 有何區別，並探索源碼

深淵 DOM 的底層

DOM 到底是什麼呢?

On This Page

現代前端的複雜應用
Vue Template & React JSX 在做什麼？
AST 抽象語法樹
Compile 編譯器
Render 渲染器
Vue Template Syntax Sugar 模板語法糖
Source Code 源碼
Conclusion 結語

Star on GitHub Create Issues