Angular 如何修改 DOM？答案

【问题标题】：How does Angular modify the DOM?Angular 如何修改 DOM？
【发布时间】：2018-12-07 03:18:21
【问题描述】：

想象一下这个模板......

<ul>
    <li *ngFor="random"></li>
</ul>

...还有一个 MutationObserver “监听”它的变化：

observer.observe(this.el, { characterData: true, subtree: true });

现在，每次此模板呈现时，观察者都会做出正确的反应。但它确实不是，当我“手动”修改内容时：

this.el.innerHTML = "<li>Another item</li>";

这可能是因为 Angular 有更聪明的方法来修改 DOM。

但是 Angular 究竟是如何做到这一点的——在一行代码中？特别是“characterData”更改正在被触发？

【问题讨论】：

如果你正在使用一个框架来处理 DOM 变化，我看不出自己观察 DOM 变化的意义......你有很多方法来监听 DOM Angular 的变化，考虑使用一个而不是突变观察者。
characterData 在您分配给元素的文本或属性节点的 nodeValue 时触发 - 与 innerHTML 相比，这是更改 DOM 的一种更高效的方式，尤其是在低端设备上，即移动浏览器。
@wOxxOm 正是我想要的——谢谢！如果您将此作为您的答案，我会接受。

【解决方案1】：

正如@wOxxOm 所说，如果您使用characterData: true 选项，那么只有在分配给元素的文本节点的nodeValue 时才会触发更改

Angular 使用#comment 节点来嵌入视图。

并且angular会为这个节点分配一些元信息

这会导致 MutationObserver 中的更改被触发。

【讨论】：