是一種前端框架（如 React, Vue）用來提升效能的概念，它在記憶體中用 JavaScript 物件模擬真實的 DOM 結構（DOM Tree），當資料變動時，會先更新這個輕量級的 JavaScript 物件，然後透過「Diffing (差異比較) 演算法」找出新舊虛擬 DOM 的差異，最後只對真實 DOM 中真正需要變動的部分進行更新，大幅減少昂貴的 DOM 操作（重繪 Reflow/重排 Repaint），實現高效的 UI 渲染和開發體驗。

虛擬 DOM 的核心概念與原理

JavaScript 物件描述：它是一個用 JavaScript 物件來表示 UI 結構的藍圖，記錄了標籤 (tag)、屬性 (props) 和子節點 (children) 等資訊。

記憶體操作：對虛擬 DOM 的操作 (建立、修改) 都發生在記憶體中，速度比直接操作瀏覽器真實 DOM 快得多。

差異比較 (Diffing)：當 UI 狀態改變時，框架會建立一個新的虛擬 DOM，然後用 Diffing 演算法比較新舊虛擬 DOM，找出最小變動的差異。

批次更新 (Batch Update)：將找出需要變動的部分（例如新增、刪除、修改節點）一次性打包，最後批量應用到真實 DOM 上，避免多次繁瑣的 DOM 操作。

聲明式 UI：開發者只需聲明 UI 應有的狀態，虛擬 DOM 和框架負責處理如何將畫面同步到真實 DOM，讓開發更簡單。

為什麼需要虛擬 DOM？

解決性能問題：直接操作真實 DOM 會頻繁觸發瀏覽器的重繪 (Repaint) 和回流 (Reflow)，非常消耗資源。

簡化開發：將手動 DOM 操作的細節隱藏在框架內部，讓開發者專注於描述 UI 狀態，提高開發效率和可維護性。
跨平台能力：基於 JavaScript 物件的抽象，為跨平台（如 React Native）打下了基礎。

為什麼需要虛擬 DOM？

解決性能問題：直接操作真實 DOM 會頻繁觸發瀏覽器的重繪 (Repaint) 和回流 (Reflow)，非常消耗資源。
簡化開發：將手動 DOM 操作的細節隱藏在框架內部，讓開發者專注於描述 UI 狀態，提高開發效率和可維護性。
跨平台能力：基於 JavaScript 物件的抽象，為跨平台（如 React Native）打下了基礎。

前端框架都有虛擬 DOM ?

只有Vue跟React有虛擬DOM。Angular則是用另一種變更偵測的方式。