angular - Angular 2 使用 Shadow DOM 还是虚拟 DOM？

Question

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

Answer 1

更新

现在直接支持 Shadow DOM。

原来的

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

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

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

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

Angular2 根本不使用虚拟 DOM。

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

有关更多详细信息，另请参阅Shadow DOM 是否像 React.js 中的虚拟 DOM 一样快？

Answer 2

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

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

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

Answer 3

Angular 2和之后的版本不使用虚拟 DOM，而是使用更改检测机制来检测任何更改并对其采取行动，而React和Vue使用虚拟 DOM与真实 DOM进行比较以检测发生的任何更改。

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

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