一玷氏、什么是 DOM (document object model)
DOM 即文檔對象模型的縮寫，
我們把這個 HTML 加載到瀏覽器中译红，瀏覽器創(chuàng)建這些節(jié)點预茄，用來顯示網(wǎng)頁。這個 HTML 會映射到一系列 DOM 節(jié)點侦厚，我們可以使用 JavaScript 和它們進行交互操作耻陕，就像這樣：
let item = document.getElementByTagName('h1')[0]
item.textContent = "New Heading"
檢索 h1 元素，并且把它的文本內(nèi)容修改成新的標題刨沦，更新 DOM 節(jié)點诗宣，然后更新瀏覽器。
二想诅、Virtual DOM - 虛擬DOM
然而網(wǎng)頁可以有很多 DOM 節(jié)點召庞，這意味著 DOM 樹可以有數(shù)千個節(jié)點。這就是為什么我們有像 Vue 這樣的框架来破，幫我們干這些費勁活篮灼，并進行大量的 JavaScript 調(diào)用。
然而徘禁，搜索和更新數(shù)千個 DOM 節(jié)點很明顯會很慢诅诱。這就是 Vue 和其他類似框架有一種叫做虛擬 DOM 的東西。虛擬 DOM 是用 JavaScript 表示 DOM 的一種方式送朱。
例如娘荡，這個 HTML 也可以通過一個虛擬節(jié)點來表示
<div> Hello </div>
看起來像這樣：
{
tag: 'div',
children: [
{
text: 'Hello'
}
]
}
如你所見干旁，它只是一個JavaScript對象。
Vue 知道如何使用此虛擬節(jié)點并掛載到 DOM 上炮沐，它會更新我們在瀏覽器中看到的內(nèi)容争群。實際上還有一個步驟，其中大年，Vue 基于我們的模板創(chuàng)建一個渲染函數(shù)换薄，返回一個虛擬 DOM 節(jié)點。
渲染函數(shù)可以是這樣的：
render(h) {
return h('div', 'hello')
}
當組件更改時鲜戒，Render 函數(shù)將重新運行专控，它將創(chuàng)建另一個虛擬節(jié)點。然后發(fā)送舊的 VNode 和新的 VNode 到 Vue中進行比較遏餐，并以最高效的方式在我們的網(wǎng)頁上更新伦腐。
我們可以將虛擬 DOM 和真實 DOM 的關(guān)系類比為藍圖和實際建筑的關(guān)系。假設(shè)我更改了 29 樓的一些數(shù)據(jù)失都。我改變了家具的布局還加了一些櫥柜柏蘑。我有兩種方法可以改變。首先粹庞，我可以拆除 29 樓的一切從頭開始重建∨恿铮或者我可以創(chuàng)造新的藍圖革半，比較新舊藍圖并進行更新以盡可能減少工作量流码。這就是虛擬 DOM 的工作原理驾荣。Vue 3 讓這些更新更快并且更高效。
三歧匈、Vue 的三個核心模塊
Reactivity Module - 響應(yīng)式模塊
響應(yīng)式模塊允許我們創(chuàng)建 JavaScript 響應(yīng)對象并可以觀察其變化乱顾。當使用這些對象的代碼運行時伏伯，它們會被跟蹤弄唧。因此候引，它們可以在響應(yīng)對象發(fā)生變化后運行。
Complier Module - 編譯器模塊
編譯器模塊獲取 HTML 模板并將它們編譯成渲染函數(shù)。這一行為可能在運行時發(fā)生在瀏覽器中，但(發(fā)生)在構(gòu)建 Vue 項目時更常見。這樣瀏覽器就可以只接收渲染函數(shù)。
Renderer Module - 渲染模塊
渲染模塊的代碼包含在網(wǎng)頁上渲染組件的三個不同階段：
- Render Phase - 渲染階段：調(diào)用 render 函數(shù)望抽，返回一個虛擬 DOM 節(jié)點加矛。
- Mount Phase - 掛載階段：使用虛擬 DOM 節(jié)點并調(diào)用 DOM API 來創(chuàng)建網(wǎng)頁。
- Patch Phase - 補丁階段：渲染器將舊的虛擬節(jié)點和新的虛擬節(jié)點進行比較煤篙，并只更新網(wǎng)頁變化的部分斟览。
現(xiàn)在讓我們來看一個例子，一個簡單組件的執(zhí)行辑奈。它有一個模板苛茂，以及在模板內(nèi)部使用的響應(yīng)對象。首先鸠窗，模板編譯器將 HTML 轉(zhuǎn)換為一個渲染函數(shù)妓羊。
然后初始化響應(yīng)對象，使用響應(yīng)式模塊稍计。
接下來躁绸，在渲染模塊中，進入渲染階段丙猬。這將調(diào)用 render 函數(shù)涨颜，它引用了響應(yīng)對象。我們現(xiàn)在監(jiān)聽這個響應(yīng)對象的變化茧球，render 函數(shù)返回一個虛擬 DOM 節(jié)點庭瑰。
然后，在掛載階段抢埋，調(diào)用 mount 函數(shù)使用虛擬 DOM 節(jié)點創(chuàng)建 web 頁面弹灭。
最后，如果我們正在監(jiān)視的響應(yīng)對象發(fā)生任何變化揪垄，渲染器會再次調(diào)用 render 函數(shù)穷吮，創(chuàng)建一個新的虛擬DOM節(jié)點。新的和舊的虛擬DOM節(jié)點饥努，發(fā)送到 Patch 函數(shù)中捡鱼，然后根據(jù)需要更新我們的網(wǎng)頁。
