PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

В чем разница между двунаправленным и однонаправленным связыванием?

Продвинутые темы

Двунаправленное и однонаправленное связывание различают направление потока данных между состоянием и представлением: однонаправленное — в одну сторону (данные → UI), двунаправленное — в обе (данные ↔ UI).

Однонаправленное связывание (one-way)

Данные текут в одну сторону — из состояния в UI. Для обновления состояния из UI нужен явный обработчик:

// React
<input value={text} onChange={(e) => setText(e.target.value)} />

Поток: state → UI → (событие) → обработчик → state. Предсказуемо и отслеживаемо.

Двунаправленное связывание (two-way)

Состояние и UI синхронизируются автоматически в обе стороны:

<input v-model="text"> <!-- Vue: изменение поля обновляет text и наоборот -->

Меньше кода, но менее явный поток.

Различия

  • Направление потока: однонаправленное — data → view; двунаправленное — data ↔ view.
  • Предсказуемость: однонаправленное легче отследить (одна точка изменения); двунаправленное короче, но труднее отлаживать при сложной логике.
  • Контроль: однонаправленное даёт явный контроль над изменениями.

Где применяется

  • React — однонаправленный поток (осознанный выбор ради предсказуемости и отладки).
  • Vue/Angular — двунаправленное (v-model/ngModel) как удобный сахар.
  • Flux/Redux — строго однонаправленный поток на уровне архитектуры.

Коротко для собеседования

Однонаправленное связывание — поток данных в одну сторону (state → UI), обратно через явный обработчик (React); предсказуемо, легко отлаживать. Двунаправленное — автоматическая синхронизация в обе стороны (Vue v-model); меньше кода, но менее прозрачно. React/Flux выбирают однонаправленность ради предсказуемости.

Другие вопросы раздела