Angular 2 使用 Shadow DOM 还是 Virtual DOM？答案

【问题标题】：Does Angular 2 use Shadow DOM or a Virtual DOM?Angular 2 使用 Shadow DOM 还是 Virtual DOM？
【发布时间】：2017-02-05 23:16:53
【问题描述】：

Angular 2 使用什么来更新 DOM。是影子 DOM 还是虚拟 DOM？ Angular 1 中有这样的概念吗？

【问题讨论】：

【解决方案1】：

更新

现在直接支持Shadow DOM。

原创

Angular2 不使用 shadow DOM（默认）也不使用 virtual DOM。

encapsulation: ViewEncapsulation.Emulated（默认）没有 shadow DOM，因为样式封装只是模拟的。

encapsulation: ViewEncapsulation.Native 在原生支持它的浏览器上启用 shadow DOM，或者在加载 webcomponents polyfill 时再次模拟它。

Shadow DOM 也不是像虚拟 DOM 那样以性能为目标，而是样式封装。

Angular2 根本不使用虚拟 DOM。

Angular2 有变化检测，检测模型的变化，只根据模型变化更新 DOM 中需要变化的部分。

【讨论】：

在MDN site 和ViewEncapsulation 上查看Shadow DOM 是什么Angular Guide
只是突然说Angular 2 可以使用Shadow DOM，默认情况下它不会：angular.io/guide/component-styles#view-encapsulation
@drhayes 感谢您的更新。很高兴听到这终于可用了。

【解决方案2】：

React 和 Vue 使用 Virtual DOM，Angular 使用直接 DOM 渲染系统。

这与 Angular 1.x 版本所做的相同，但它经过优化，给你一个惊喜:)

使用 JavaScript 对象比使用 DOM 快得多，因为屏幕上没有任何内容

【讨论】：

【解决方案3】：

Angular 2 和之后的版本不使用 Virtual DOM 而是使用更改检测机制来检测任何更改并在 React 和 Vue 使用 Virtual DOM 与 Real DOM 进行比较，以检测发生的任何变化。

另一方面，Angular 确实在封装中使用 Shadow DOM 来隐藏标记结构、样式和行为并与页面上的其他代码或组件分开，以免不同部分发生冲突。你可以了解更多关于封装here。

最后一部分没有在 Angular 1 或 AngularJS 中使用的 Virtual DOM 和 Shadow DOM 的概念强>。

【讨论】：