了解 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 转换