---

前言

詳細整理 Vue 3 中編譯時和運行時的概念區別，并重點解釋為什么組件實例是在運行時創建的。
我會結合官方文檔、源碼分析和社區解釋，確保內容清晰易懂，并配有示意圖來說明組件生命周期中的創建時機。

Vue 3 中的編譯時 vs 運行時區別

在 Vue 3 中，編譯時（compile time）指的是框架在運行應用之前，對組件模板進行的編譯處理；而運行時（runtime）是指應用實際執行、組件實例創建和更新 DOM 的階段。簡而言之，編譯時將模板“翻譯”成渲染函數代碼，運行時則執行這些代碼來創建組件實例、處理響應式數據并操作真實 DOM。

在 Vue 3 中，模板會先被編譯為渲染函數代碼，然后在運行時執行渲染函數產出虛擬 DOM 樹，并據此更新真實 DOM。組件實例持有響應式狀態，當狀態變化時會觸發重新渲染和虛擬 DOM patch 更新真實 DOM。

模板在編譯時轉化為渲染函數

Vue 采用類似 Vue 2 的策略：提供類 HTML 的模板語法，但會在編譯時將模板編譯成等價的 渲染函數，該渲染函數返回虛擬 DOM (VNode) 樹。這個編譯過程主要分三步：

1. 解析 (parse)： 將模板字符串解析生成對應的 抽象語法樹 (AST)。AST 是模板的結構化表示，包含節點類型、屬性等信息，用于后續優化和代碼生成。在這一步，編譯器可以識別模板中的指令和結構，例如 v-if、v-for、自定義組件標簽等。

2. 轉換 (transform)： 對 AST 進行一系列轉換和優化處理。Vue 3 引入了插件化的 AST 轉換管線，每種指令 (如 v-if、v-for、v-model 等) 都對應一個轉換插件，對 AST 節點進行操作。同時，編譯器在此階段對模板進行靜態分析，找出模板中不會改變的靜態內容和結構。對于靜態節點或靜態子樹，編譯器會做標記，并執行靜態提升等優化：將這些靜態節點提升為常量，從渲染函數中提取出來。這樣在每次重新渲染時就無需重復創建和對比這些不變的節點，提高運行時性能。

3. 代碼生成 (generate)： 將優化后的 AST 轉換為對應的渲染函數代碼字符串。最終得到的渲染函數會返回虛擬 DOM 樹。例如，一個簡單模板 <h1>Hello, {{ name }}</h1> 編譯后可能生成類似的渲染函數（簡化示意）：

   function render(ctx) {with(ctx)