一、什么是 DOM (document object model)
DOM 即文檔對象模型的縮寫，
我們把這個 HTML 加載到瀏覽器中，瀏覽器創建這些節點，用來顯示網頁。這個 HTML 會映射到一系列 DOM 節點，我們可以使用 JavaScript 和它們進行交互操作，就像這樣：
let item = document.getElementByTagName('h1')[0]
item.textContent = "New Heading"
檢索 h1 元素，并且把它的文本內容修改成新的標題，更新 DOM 節點，然后更新瀏覽器。
二、Virtual DOM - 虛擬DOM
然而網頁可以有很多 DOM 節點，這意味著 DOM 樹可以有數千個節點。這就是為什么我們有像 Vue 這樣的框架，幫我們干這些費勁活，并進行大量的 JavaScript 調用。
然而，搜索和更新數千個 DOM 節點很明顯會很慢。這就是 Vue 和其他類似框架有一種叫做虛擬 DOM 的東西。虛擬 DOM 是用 JavaScript 表示 DOM 的一種方式。
例如，這個 HTML 也可以通過一個虛擬節點來表示
<div> Hello </div>
看起來像這樣：
{
tag: 'div',
children: [
{
text: 'Hello'
}
]
}
如你所見，它只是一個JavaScript對象。
Vue 知道如何使用此虛擬節點并掛載到 DOM 上，它會更新我們在瀏覽器中看到的內容。實際上還有一個步驟，其中，Vue 基于我們的模板創建一個渲染函數，返回一個虛擬 DOM 節點。
渲染函數可以是這樣的：
render(h) {
return h('div', 'hello')
}
當組件更改時，Render 函數將重新運行，它將創建另一個虛擬節點。然后發送舊的 VNode 和新的 VNode 到 Vue中進行比較，并以最高效的方式在我們的網頁上更新。
我們可以將虛擬 DOM 和真實 DOM 的關系類比為藍圖和實際建筑的關系。假設我更改了 29 樓的一些數據。我改變了家具的布局還加了一些櫥柜。我有兩種方法可以改變。首先，我可以拆除 29 樓的一切從頭開始重建。或者我可以創造新的藍圖，比較新舊藍圖并進行更新以盡可能減少工作量。這就是虛擬 DOM 的工作原理。Vue 3 讓這些更新更快并且更高效。
三、Vue 的三個核心模塊
Reactivity Module - 響應式模塊
響應式模塊允許我們創建 JavaScript 響應對象并可以觀察其變化。當使用這些對象的代碼運行時，它們會被跟蹤。因此，它們可以在響應對象發生變化后運行。
Complier Module - 編譯器模塊
編譯器模塊獲取 HTML 模板并將它們編譯成渲染函數。這一行為可能在運行時發生在瀏覽器中，但(發生)在構建 Vue 項目時更常見。這樣瀏覽器就可以只接收渲染函數。
Renderer Module - 渲染模塊
渲染模塊的代碼包含在網頁上渲染組件的三個不同階段：
- Render Phase - 渲染階段：調用 render 函數，返回一個虛擬 DOM 節點。
- Mount Phase - 掛載階段：使用虛擬 DOM 節點并調用 DOM API 來創建網頁。
- Patch Phase - 補丁階段：渲染器將舊的虛擬節點和新的虛擬節點進行比較，并只更新網頁變化的部分。
現在讓我們來看一個例子，一個簡單組件的執行。它有一個模板，以及在模板內部使用的響應對象。首先，模板編譯器將 HTML 轉換為一個渲染函數。
然后初始化響應對象，使用響應式模塊。
接下來，在渲染模塊中，進入渲染階段。這將調用 render 函數，它引用了響應對象。我們現在監聽這個響應對象的變化，render 函數返回一個虛擬 DOM 節點。
然后，在掛載階段，調用 mount 函數使用虛擬 DOM 節點創建 web 頁面。
最后，如果我們正在監視的響應對象發生任何變化，渲染器會再次調用 render 函數，創建一個新的虛擬DOM節點。新的和舊的虛擬DOM節點，發送到 Patch 函數中，然后根據需要更新我們的網頁。
