Question

我当前正在创建一个经常更改页面上的文本和图像的应用程序。在运行几个小时后，Chrome几乎消耗了整个CPU。请注意，如果出现此问题，请不要仅重启浏览器。

我现在试图禁用UI呈现，只是从服务器接收数据更新，问题似乎已经消失。

<img class="icon" src="{{myIcon1}}"/>
<img class="icon" [src]="myIcon2"/>

Angular是否像第二行一样只更新第一行的“ src”属性，还是如果“ myIcon1”发生更改，它总是创建整个组件模板的完整新实例吗？

Answer 1

尽管插值和数据绑定是相互交替的。但是它们之间的主要区别在于，如果我们可以在插值情况下连接字符串。myIcon1 = "sample.jpg"; <img class="icon" src="https://www.sample/{{myIcon1}}"/>

属性绑定用于将元素属性设置为非字符串数据值

    <button [disabled]='isDisable'>Click Me</button>

更改禁用属性将相应地禁用/启用按钮。但是，如果我们使用

    <button disabled='{{isDisable}}'>Click Me</button>

无论isDisable属性如何，按钮始终处于禁用状态

Answer 2

我认为它会更新虚拟DOM，作为回报，它会从头开始渲染整个接口。但是使用Angular 8，他们正在实现增量DOM。我已经在这个网站上阅读了它。