構成 Vue.js 的關鍵要素
Vue.js 儲存庫
Vue.js 可以在這個儲存庫中找到： https://github.com/vuejs/core
有趣的是，這是 v3 的儲存庫。對於 v2 和更早的版本，您可以在另一個儲存庫中找到： https://github.com/vuejs/vue
為了本次討論，我們將專注於核心儲存庫（v3）。
構成 Vue.js 的主要要素
讓我們首先對 Vue.js 的實作有一個整體的理解。
Vue.js 儲存庫中有一個關於貢獻的 markdown 檔案； 如果您感興趣，可以查看它以了解其架構。（不過，跳過也沒關係。）
https://github.com/vuejs/core/blob/main/.github/contributing.md
從大的方面來說，Vue.js 包含以下主要元件：
執行期（Runtime）
執行期包含影響實際操作的所有內容 - 從渲染到元件狀態管理。
這指的是在瀏覽器或伺服器（在 SSR 的情況下）上執行的用 Vue.js 開發的 Web 應用程式的全部內容。具體包括：
元件系統
Vue.js 是一個面向元件的框架。根據使用者的需求，您可以可維護地建立和封裝元件以供重用。
它還提供元件之間狀態共享（props/emits 或 provide/inject）和生命週期鉤子等功能。
響應式系統
它跟蹤元件持有的狀態，並在發生變化時更新螢幕。
這種監控和響應機制稱為響應式。
import { ref } from 'vue'
const count = ref(0)
// 當執行這個函式時，顯示計數的螢幕也會更新
const increment = () => {
count.value++
}（僅僅透過改變一個值就能更新螢幕，這很神奇，對吧？）
虛擬 DOM 系統
虛擬 DOM 系統是 Vue.js 的另一個強大機制。它定義了一個模仿 DOM 的 JavaScript 物件在 JS 執行期中。
更新時，它將目前的虛擬 DOM 與新的虛擬 DOM 進行比較，並僅將差異反映到真實 DOM 中。
我們將在專門的章節中深入探討這一點。
編譯器（Compiler）
編譯器負責將開發者介面轉換為內部實作。
「開發者介面」是指「使用 Vue.js 進行 Web 應用程式開發的開發者」和「Vue 內部操作」之間的邊界。
本質上，當您使用 Vue.js 編寫時，有些部分顯然不是純 JavaScript - 比如模板指令或單檔案元件。
Vue.js 提供這些語法並將它們轉換為純 JavaScript。
此功能僅在開發階段使用，不是實際執行的 Web 應用程式的一部分。
（它僅僅編譯為 JavaScript 程式碼）。
編譯器有兩個主要部分：
模板編譯器
顧名思義，這是模板部分的編譯器。
具體來說，它處理 v-if 或 v-on 等指令，使用者元件標記（如 ）以及插槽等功能。
SFC 編譯器
正如您可能猜到的，這代表單檔案元件編譯器。
它允許您在單個 .vue 檔案中定義元件的模板，腳本和樣式。
在 script setup 中使用的函式，如 defineProps 或 defineEmits 也由此編譯器提供。
這個 SFC 編譯器通常與 Webpack 或 Vite 等工具結合使用。
作為其他工具外掛的實作不在核心儲存庫中。
SFC 編譯器的主要功能在核心中，但外掛在不同的儲存庫中實作。
（參考：vitejs/vite-plugin-vue）
順便說一下，我們將實作一個實際的 Vite 外掛來操作我們的自訂 SFC 編譯器。
窺探 vuejs/core 目錄
現在我們對 Vue 的主要要素有了大致的了解，讓我們看看實際的原始碼是什麼樣子的（儘管我們只是在討論目錄）。
主要原始碼儲存在「packages」目錄中。
https://github.com/vuejs/core/tree/main/packages
一些需要關注的關鍵目錄是：
- compiler-core
- compiler-dom
- compiler-sfc
- reactivity
- runtime-core
- runtime-dom
- vue
為了理解它們的相互相依關係，貢獻指南中的圖表特別有見地。
https://github.com/vuejs/core/blob/main/.github/contributing.md#package-dependencies
在這本書中，我們將為所有這些主題提供實作和解釋。