反应虚拟DOM与影子DOM：有什么区别

　　反应和 Vue.js使用虚拟 DOM 来优化性能。那么影子多姆是什么呢？

　　如果你使用 React 或 Vue，你可能熟悉虚拟 DOM(文档对象模型)。这不应与影子 DOM 混淆。

反应虚拟DOM与影子DOM

　　在查看虚拟 DOM 和影子 DOM 之前，您应该清楚地了解文档对象模型。

　　为此，通俗地说，我们会说

　　DOM 表示您网站的结构。

　　如果您想了解有关 DOM 的创建位置以及 HTML、DOM 和 JavaScript 之间的关系的更多信息，请考虑阅读什么是 DOM？

　　现在我们对 DOM 有了一些了解，让我们看看什么是虚拟 DOM。

　　什么是虚拟 DOM？

　　简而言之，虚拟 DOM (VDOM) 是一个编程概念，其中 UI 的理想或“虚拟”表示形式保存在内存中，并通过库(如 reactDOM by reactjs.org)与“真实”DOM 同步。

　　换句话说，React 构建了一个逻辑树，用于表示引擎盖下的实际 DOM 结构。

　　为什么我们需要虚拟 DOM？

　　虚拟DOM是解决现代网络中常见问题的一种方法。

　　虽然应用程序变得越来越大，但框架和库往往会过于频繁地操作和更新 DOM。这在很多方面可能很昂贵。

　　导航 DOM 会变慢，需要更多的处理能力，最终影响应用程序的性能。

　　例如，它会使页面变慢。

　　有几种方法可以解决此问题：

　　React 使用虚拟 DOM，并通过对账过程将其同步到真实的 DOM。

　　Angular使用更改检测机制“来查看您的应用程序状态是否已更改以及是否需要更新任何DOM”。

　　维尤还使用虚拟 DOM。通过使用一些差异算法，Vue 避免了在新更改后重新渲染整个 DOM。

　　简而言之，让我们记住，虚拟 DOM 是真实 DOM 的副本。

　　通过告诉 React 我们想要实现的最终 DOM 状态(UI 的外观)，React 确保 DOM 与该状态匹配。

　　什么是暗影多姆？

　　Shadow DOM是一种专为封装而设计的浏览器技术，例如，保持标记结构，样式和行为的隐藏，并与页面上的其他代码分开，以便不同的部分不会发生冲突，MDN。

　　封装会屏蔽某些代码，使其不会与页面上的其他代码冲突。

　　换句话说，由于影子DOM，我们可以将其他元素附加到真正的DOM，知道新元素不会与真正的DOM本身冲突。

　　MDN提出的一个例子是标签。虽然您只能在 DOM 中看到标记，但此元素在其影子 DOM 中包含一系列按钮和其他控件。

　　虚拟 DOM 和影子 DOM 之间的差异

　　关于虚拟 DOM 和影子 DOM 之间的区别，我们能说些什么呢?这有点像 Java 和 Java 脚本之间的差异！

　　尽管提到了 DOM，但虚拟 DOM 和影子 DOM 是不同的技术。

　　虚拟 DOM 被 React 和 Vue 等库用来解决在保持最佳性能的同时更改 DOM 的问题。

　　虚拟 DOM 是整个真实 DOM 的副本，并在浏览器 API 之上实现。

　　影子 DOM 是 Web 组件和浏览器 API 中固有的。因此，它也可以在使用 React 和 Vue 等库或 Angular 等框架时使用。

　　影子 DOM 是一块 DOM，在其自己的 Web 组件中被“屏蔽”。

　　相反，如果您要使用普通 JavaScript 创建应用程序，则不会使用虚拟 DOM。