Vue 3.0 渲染機制和優(yōu)化

為了學習如何更好地使用 Vue，不需要閱讀本頁，但是它提供了更多信息，如果你想知道渲染在背后是如何工作的。

#虛擬 DOM

現(xiàn)在我們知道了偵聽器是如何更新組件的，你可能會問這些更改最終是如何應用到 DOM 中的！也許你以前聽說過虛擬 DOM，包括 Vue 在內的許多框架都使用這種方式來確保我們的接口能夠有效地反映我們在 JavaScript 中更新的更改

點擊此處實現(xiàn)

我們用 JavaScript 復制了一個名為 Virtual Dom 的 DOM，我們這樣做是因為用 JavaScript 接觸 DOM 的計算成本很高。雖然用 JavaScript 執(zhí)行更新很廉價，但是找到所需的 DOM 節(jié)點并用 JS 更新它們的成本很高。所以我們批處理調用，同時更改 DOM。

虛擬 DOM 是輕量級的 JavaScript 對象，由渲染函數(shù)創(chuàng)建。它包含三個參數(shù)：元素，帶有數(shù)據(jù)的對象，prop，attr 以及更多，和一個數(shù)組。數(shù)組是我們傳遞子級的地方，子級也具有所有這些參數(shù)，然后它們可以具有子級，依此類推，直到我們構建完整的元素樹為止。

如果需要更新列表項，可以使用前面提到的響應性在 JavaScript 中進行。然后，我們對 JavaScript 副本，虛擬 DOM 進行所有更改，并在此與實際 DOM 之間進行區(qū)分。只有這樣，我們才能對已更改的內容進行更新。虛擬 DOM 允許我們對 UI 進行高效的更新！