Virtual DOM 如何在 React 或 Vue 中工作

Question

我是学生，我正在尝试在 JavaScript 中为我的大学项目创建自己的虚拟 DOM（它不会有任何高级功能，如道具或事件，我会保持简单），就像其他著名的框架 React、Vue 等一样。

我只想知道当我们有多个代码文件（代码拆分）时。 如果我对任何深层子元素进行更改，我不需要比较完整的虚拟 DOM（包括所有子元素和父元素），或者我只需要比较那个子元素。

如果我必须将完整的新虚拟 DOM（包括所有子项）与以前的虚拟 DOM 进行比较。 那我为什么要关心在 React 或 Vue 中重新渲染（因为 child 的任何更改都会迫使框架比较完整的 Virtual DOM）

Answer 1

根据我对 React 的经验推断，对你最后一点的回答是，比较 Javascript 中的虚拟 DOM 有助于反应知道它必须在实际 DOM 上重新渲染什么，所以“重新渲染”很难APP性能受到影响的部分。 希望这会有所帮助。

Answer 2

对于 Vue，虚拟 DOM 的工作方式在 vue2 和 vue3 中有所不同。

vue3 的做法是，

1. 通过解析 HTML 模板或从组件文件中渲染 function 并将其转换为虚拟节点表示。
2. 在进行解析时，它会记录对动态数据具有依赖性的节点。
3. 像下面的东西

dynamicData = { data1: [ effect1, effect2, ... ], data2: [ effect4, effect5, ... ], ... }

4. 效果是定义解析某些数据值所需的计算的函数。
5. 效果还包括为虚拟节点渲染 function
6. 渲染函数巧妙地将虚拟节点转换为 DOM 元素
7. 现在，每当 data1 更改时，Vue3 都会重新执行相应的效果并触发更新以进行后续数据更改。

参考：

1. Vue3 反应性
2. Vnode 转换