Verstehen Sie das Innenleben des virtuellen DOM in React oder Vue

Question

Ich bin Student und versuche, mein eigenes virtuelles DOM für mein College-Projekt zu erstellen (es wird keine erweiterten Funktionen wie Requisiten oder Ereignisse haben, ich werde es einfach halten), wie andere berühmte Frameworks wie React, Vue usw . Dasselbe.

Ich möchte nur wissen, wann wir mehrere Codedateien haben (Codeaufteilung). Wenn ich eine Änderung an einem tiefgreifenden untergeordneten Element vornehme, muss ich dann das gesamte virtuelle DOM (einschließlich aller untergeordneten Elemente und übergeordneten Elemente) vergleichen, oder muss ich nur dieses untergeordnete Element vergleichen?

Wenn ich das komplett neue virtuelle DOM (einschließlich aller untergeordneten Elemente) mit dem vorherigen virtuellen DOM vergleichen muss. Warum sollte ich mich also um ein erneutes Rendern in React oder Vue kümmern (da alle Änderungen am untergeordneten Element das Framework dazu zwingen, das gesamte virtuelle DOM zu vergleichen)

Answer 1

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

vue3 的做法是，

1. 通过解析组件文件中的 HTML 模板或渲染函数并将其转换为虚拟节点表示形式。
2. 在进行解析时，它会记录与动态数据有依赖关系的节点。
3. 如下所示

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

参考文献：

1. Vue3 反应性
2. Vnode 转换