Virtual DOM 和 Shadow DOM 有啥不同？ [复制]

Posted 2023-02-22

【中文标题】Virtual DOM 和 Shadow DOM 有啥不同？ [复制]

【英文标题】：What's different between Virtual DOM and Shadow DOM? [duplicate]Virtual DOM 和 Shadow DOM 有什么不同？ [复制]

【发布时间】：2018-10-27 23:41:11

【问题描述】：

在学习vue.js的过程中。

我学习了 shadow DOM 是为了理解基本的 Vue.js 组件。 我认为影子 DOM 类似于虚拟 DOM。 因此，我尝试搜索了许多影子 DOM 和虚拟 DOM 不同的信息。 但是，很难找到正确的信息，这就是我问的原因。

我认为 shadow DOM 和 virtual DOM 相似的原因是它们是为了解决当前 DOM 结构问题而创建的。

当前的 DOM 结构问题在现代 Web 应用程序（例如 SPA（Single Page Application））上很难处理，因为现代 Web 应用程序环境会生成大量节点。

因此，创建了虚拟 DOM。它是 DOM 结构的抽象，意思是“我们不直接处理 DOM 结构”。

但是，我认为这也适用于 shadow DOM。所以，我认为virtual DOM和shadow DOM的区别在于shadow DOM是W3C标准，而virtual DOM是react.js标准。

此意见仅在两种技术级别中概述。 我当然知道这些差异。 在内心深处，这是一种完全不同的技术。 shadow DOM 有模板、装饰器、自定义元素，而虚拟 DOM 使用 javascript 对象（例如 ReactElements）进行操作。

我想知道我的意见是否正确？

【问题讨论】：

这里***.com/questions/36012239/…的一些答案似乎有你所寻求的一些信息

@Tony omg .. 当我发现它时没有出现。谢谢！！

本网站不提供引起意见的答案...即使您的最后一段和最后一句话也表明这就是您想要的。试着改写一下，我会撤回我的近距离投票。

【参考方案1】：

虚拟 DOM 是真实 DOM 的任何一种表示形式。虚拟 DOM 是关于避免对 DOM 进行不必要的更改，这是昂贵的 性能方面，因为对 DOM 的更改通常会导致 重新渲染页面。它允许收集几个更改是 一次应用，所以不是每一个更改都会导致重新渲染，但是 相反，重新渲染只发生在一组更改之后 应用于 DOM。

Shadow DOM 主要是关于实现的封装。一种 单个自定义元素可以实现或多或少的复杂逻辑 与或多或少复杂的 DOM 相结合。 Shadow DOM 指的是 浏览器将 DOM 元素的子树包含到 渲染文档，但不渲染到主文档 DOM 树中。

https://vuejsfeed.com/blog/learn-the-differences-between-shadow-dom-and-virtual-dom