Angular обрабатывает интерполяцию и одностороннее связывание одинаково?

Question

В настоящее время я создаю приложение, которое часто изменяет текст и изображения на странице. Chrome потребляет почти весь процессор после нескольких часов работы. Обратите внимание, что в этом случае нельзя просто перезапустить браузер.

Я попытался отключить рендеринг пользовательского интерфейса и просто получать обновления данных с сервера, и проблема, похоже, исчезла.

<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>

Изменение свойства disable отключит / включит кнопку соответственно.Но если мы используем

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

Кнопка всегда будет отключена независимо от свойства isDisable

Для получения дополнительной информации https://angular.io/guide/template-syntax#!#interpolation

Answer 2

Я думаю, что он обновляет виртуальный DOM и, в свою очередь, визуализирует весь интерфейс с нуля. Но с Angular 8 они реализуют добавочный DOM. Я читал об этом на этом сайте.

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36