Проверка изменений

Интерфейсу нужно знать, когда перерисоваться. Если программист меняет поле обычного объекта, никто об этом не узнаёт: в JavaScript нет встроенного сигнала «поле изменилось». Dirty checking решает задачу в лоб — запоминает значения, которые использованы в шаблоне, и в нужные моменты сверяет их с прошлым снимком. Отличающиеся значения считаются «грязными», и связанные с ними части страницы обновляются.

Как это было устроено в AngularJS

Самый известный пример — первая версия Angular, AngularJS. Каждое выражение в шаблоне регистрировало наблюдателя (watcher). После клика, ответа сервера или срабатывания таймера фреймворк запускал цикл $digest: обходил всех наблюдателей и сравнивал значения. Если обработчик по ходу менял данные, цикл повторялся, пока всё не успокоится; после десяти итераций без стабилизации выбрасывалась ошибка.

// упрощённая идея одного прохода
for (const w of watchers) {
  const value = w.get();
  if (value !== w.last) {
    w.last = value;
    w.update(value);  // перерисовать связанный фрагмент
    dirty = true;
  }
}

Если изменение происходило вне механизмов фреймворка — например, в стороннем плагине jQuery, — цикл не запускался, и экран не обновлялся, пока не вызвать $scope.$apply(). Это была одна из самых частых ошибок.

Сильные и слабые стороны

Плюс подхода — простота для программиста: данные остаются обычными объектами, без обёрток. Минус — стоимость: каждое срабатывание проверяет всех наблюдателей, и на странице с большими таблицами интерфейс начинает тормозить. Для вложенных объектов приходилось выбирать между дешёвым поверхностным сравнением и дорогим глубоким.

Что используют вместо

Современный Angular тоже сравнивает значения привязок, но идёт по дереву компонентов и умеет пропускать ветви, где входные данные не менялись, а в новых версиях появились сигналы. Vue перехватывает чтение и запись свойств через Proxy и точно знает, какой компонент зависит от какого поля. Общий тренд — точечное отслеживание зависимостей вместо сплошного перебора. О том, как значения попадают в разметку, рассказано в статье про связывание данных.