我是一名學生，我正在嘗試為我的大學專案創建自己的虛擬 DOM（它不會有任何高級功能，如道具或事件，我會保持簡單）像其他著名的框架 React、Vue 等一樣在 JavaScript 中。
我只想知道當我們有多個代碼檔案（代碼拆分）時。如果我對任何深層子元素進行更改，我不需要比較完整的虛擬 DOM（包括所有子元素和父元素），或者我只需要比較那個子元素。
如果我必須將完整的新虛擬 DOM（包括所有子項）與以前的虛擬 DOM 進行比較。那我為什么要關心在 React 或 Vue 中重新渲染（因為 child 的任何更改都會迫使框架比較完整的 Virtual DOM）
uj5u.com熱心網友回復：
根據我對 React 的經驗推斷，對你最后一點的回答是，比較 Javascript 中的虛擬 DOM 有助于反應知道它必須在實際 DOM 上重新渲染什么，所以“重新渲染”是困難的APP性能受到影響的部分。希望這會有所幫助。
uj5u.com熱心網友回復：
對于 Vue，虛擬 DOM 的作業方式在 vue2 和 vue3 中有所不同。
vue3 的做法是，
- 通過從組件檔案中決議 HTML 模板或渲染函式并將其轉換為虛擬節點表示。
- 在進行決議時，它會記錄對動態資料具有依賴性的節點。
- 像下面的東西
dynamicData = { data1: [ effect1, effect2, ... ], data2: [ effect4, effect5, ... ], ... }
- 效果是定義決議某些資料值所需的計算的函式。
- 效果還包括虛擬節點的渲染功能
- 渲染函式巧妙地將虛擬節點轉換為 DOM 元素
- 現在，每當 data1 更改時，Vue3 都會重新執行相應的效果并觸發更新以進行后續資料更改。
參考：
- Vue3 反應性
- Vnode 轉換
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/415974.html
標籤：
上一篇：Vuejs：從子組件訪問父方法