Связывание данных

Без связывания любое изменение данных требует ручной работы: найти нужный элемент в DOM, заменить текст, поменять класс, не забыть все места, где выводится то же значение. В интерфейсе со сложной формой или корзиной такой код быстро превращается в клубок. Связывание переносит эту рутину во фреймворк: разработчик описывает, какие данные где показываются, а обновление DOM делает библиотека.

Под капотом подходы разные. Vue отслеживает чтение и запись реактивных объектов. Angular запускает проверку изменений после событий. React просто перерисовывает компонент при вызове функции обновления состояния и сравнивает результат с прошлым.

Одностороннее и двустороннее

• Одностороннее: данные → интерфейс. Чтобы изменить данные, пользовательское действие вызывает обработчик, который явно обновляет состояние. Так устроен React, и так проще отследить, кто и когда поменял значение.
• Двустороннее: поле формы и переменная связаны в обе стороны. Пользователь печатает — переменная меняется сама. Это короче, но в больших приложениях источник изменений искать сложнее.

Пример во Vue

<script setup>
import { ref, computed } from 'vue';
const qty = ref(1);
const price = 1200;
const total = computed(() => qty.value * price);
</script>

<template>
  <input v-model.number="qty" type="number" min="1">
  <p>Итого: {{ total }}</p>
</template>

Директива v-model — двустороннее связывание: ввод в поле меняет qty, а пересчёт суммы и обновление абзаца происходят без единой строки работы с DOM. В React то же поле записывают как value={qty} плюс обработчик onChange, который вызывает setQty.

Когда не нужно

Для сайта-визитки или блога с парой интерактивных элементов фреймворк ради связывания избыточен. Аккордеон, маска телефона или кнопка «Показать ещё» пишутся на чистом JavaScript в несколько строк. Связывание окупается там, где одно значение влияет на многое: калькуляторы, фильтры каталога, личные кабинеты, многошаговые формы.