В чем разница между двойным и односторонним связыванием у элемента

«В чем разница между двойным и односторонним связыванием у элемента» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Двойное связывание (v-model в Vue, [(ngModel)] в Angular) автоматически синхронизирует данные между UI и моделью. Например, при изменении поля ввода обновляется модель и наоборот.

Одностороннее связывание (:value в Vue, [ngModel] в Angular) передаёт данные только в одном направлении — из модели в UI. Обратное обновление требует ручной обработки событий.

Пример (Vue):

<!-- Двустороннее -->
<input v-model="message"> <!-- автосинхронизация -->

<!-- Одностороннее -->
<input :value="message" @input="message = $event.target.value">
<!-- требует явного обновления модели -->