了解 React 或 Vue 中虛擬 DOM 的內部運作原理

Question

我是一名學生，我正在嘗試為我的大學專案創建自己的虛擬DOM（它不會有任何高級功能，例如道具或事件，我會保持簡單），就像其他著名的框架React、 Vue 等一樣。

我只是想知道當我們有多個程式碼檔案時（程式碼分割）。如果我對任何深層子元素進行更改，我是否需要比較完整的虛擬 DOM（包括所有子元素和父元素），或者我只需要比較該子元素。

如果我必須將完整的新虛擬 DOM（包括所有子層級）與先前的虛擬 DOM 進行比較。那為什麼我應該關心在 React 或 Vue 中重新渲染（因為 child 的任何更改都會迫使框架比較完整的 Virtual DOM）

Answer 1

對於 Vue， vue2 和 vue3 中虛擬 DOM 的工作方式有所不同。

vue3 的做法是，

1. 透過解析元件檔案中的 HTML 範本或渲染函數並將其轉換為虛擬節點表示形式。
2. 在進行解析時，它會記錄與動態資料有依賴關係的節點。
3. 如下圖

4. 效果是定義解析某些資料值所需的計算的函數。
5. 效果還包含虛擬節點的渲染功能
6. 渲染函數巧妙地將虛擬節點轉換為 DOM 元素
7. 現在每當 data1 發生變化時，Vue3 都會重新執行對應的效果並觸發後續資料變更的更新。

參考文獻：

1. #Vue3 反應性
2. Vnode 轉換< /里>

#