高階 30 分鐘概要
AI 產生的附錄
本附錄由 GPT-5.5 根據 chibivue 原書內容起草。請將這條路線視為學習指南；原始章節與實作程式碼仍是權威依據。
這是一幅高度壓縮的全書地圖，適合希望在閱讀原始碼前快速通覽全書的讀者。每個檢查點約用一分鐘。內容已經很清楚時就繼續前進；感覺模糊時則開啟連結所指的章節。
30 個檢查點
- 全書從一行渲染程式碼開始：重點不是完美複製 Vue，而是親手重建其中的概念。
- Vue 的核心組成部分：執行期、渲染器、響應式系統、編譯器和 SFC 工具分別關注不同的問題。
- 專案設定：套件邊界讓學習路徑清晰可見。
- createApp：應用程式 API 封裝掛載過程，為使用者提供統一入口。
- 套件架構：runtime-core 保持平台無關，runtime-dom 負責瀏覽器操作。
- h 與 VNode：渲染結果是資料結構，而不是 DOM。
- 事件與屬性：DOM patch 需要針對平台處理 props。
- 最小響應式系統：Proxy 讀取意味著 track，Proxy 寫入意味著 trigger。
- 最小虛擬 DOM：patch 比較新舊 VNode 並更新 DOM。
- 最小元件：掛載元件 VNode 時會建立實例並執行渲染函式。
- Props：父元件的資料透過正規化輸入傳入子元件。
- Emits：子元件事件本質上是依慣例命名的父元件處理器。
- 模板編譯器概覽：模板會變成渲染函式。
- 編譯器實作：解析、轉換和程式碼產生構成編譯器的核心流程。
- 模板綁定：編譯器輸出必須從渲染上下文讀取值。
- 解析 SFC：
.vue檔案會拆分為 script、template 和 style 區塊。 - SFC template/script/style：Vite 外掛將 SFC 轉換接入開發流程。
- 帶 key 的 patch：穩定的 key 讓渲染器能夠移動和重複使用子節點。
- Shape Flags：位元旗標降低重複型別檢查的成本。
- 排程器：響應式變化將工作加入佇列，從而批次處理重複更新。
- ref、computed 與 watch：響應式能力從物件擴充到值容器和面向使用者的 effect。
- 響應式 Proxy 處理器：集合、ref、唯讀值與 shallow 值需要更細緻的處理器邏輯。
- Effect 清理與作用域：effect 不只需要重新執行，也需要生命週期管理。
- 元件生命週期：元件實例為執行期呼叫使用者鉤子提供時機。
- Provide/Inject 與 setup context：元件樹需要結構化的相依性與上下文傳遞管道。
- 插槽：子節點可以作為延遲執行的渲染函式傳遞。
- 模板轉換：指令是將語法轉換為 VNode 資料的編譯器外掛。
- 結構指令：
v-if、v-for、Fragment、註解和插槽共同決定產生樹的形狀。 - SFC 編譯器巨集：
script setup、defineProps、defineEmits、scoped CSS 和基於型別的巨集都是編譯期便利功能。 - 應用程式開發基礎與最佳化：路由、Store、SSR、內建元件、靜態提升、Patch Flags、樹扁平化和 Vapor Mode 展示同一組核心概念如何擴充。
完成概要之後
不中斷地閱讀一條原始碼路徑：
txt
packages/reactivity -> packages/runtime-core -> packages/runtime-dom -> packages/compiler-core -> packages/compiler-sfc接著閱讀除錯原始 Vue.js 原始碼，將 chibivue 的簡化選擇與 vuejs/core 比較。\n