Virtual DOM 如何在 React 或 Vue 中工作答案

【问题标题】：How Virtual DOM works in React or VueVirtual DOM 如何在 React 或 Vue 中工作
【发布时间】：2022-01-19 15:59:20
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

vue3 的做法是，

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

参考资料：

【讨论】：

【解决方案2】：

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

【讨论】：