Як ViewModel забезпечує двосторонню прив'язку даних (data binding)?

Патерни проєктуванняMiddle~2 хв читання

Двостороння прив'язка даних (two-way data binding) - це механізм, завдяки якому View і ViewModel автоматично синхронізуються між собою: якщо змінюється значення в моделі представлення - інтерфейс оновлюється, і навпаки - якщо користувач змінює дані в інтерфейсі, оновлюється властивість ViewModel.

1. Суть механізму

ViewModel зберігає дані, а View "підписується" на них.

Коли дані в ViewModel змінюються - View оновлює відображення. Коли користувач вводить щось у View - ViewModel отримує нове значення.

Таким чином, між ними створюється реактивний зв'язок, і код оновлення інтерфейсу або передачі даних писати не потрібно.

2. Як це працює технічно

1. ViewModel містить спостережувані поля

Замість звичайних змінних використовуються observable-властивості - об'єкти, які повідомляють підписників про зміни.

Приклад на Kotlin (Android):

kotlin

class LoginViewModel : ViewModel() {
    val username = MutableLiveData<String>()
    val password = MutableLiveData<String>()
}

Приклад на C# (WPF / .NET):

csharp

public class LoginViewModel : INotifyPropertyChanged {
    private string _username;
    public string Username {
        get => _username;
        set {
            _username = value;
            OnPropertyChanged(nameof(Username));
        }
    }
}

2. View прив'язує UI-елементи до цих властивостей

Інтерфейс "пов'язує" елементи напряму з ViewModel.

В Android (XML):

xml

<EditText
    android:text="@={viewModel.username}" />

Знак @={...} означає двосторонню прив'язку - якщо користувач змінює текст, viewModel.username оновлюється автоматично.

У WPF (XAML):

xml

<TextBox Text="{Binding Username, Mode=TwoWay}" />

3. Система відстежує зміни

Під капотом працює спостерігач (observer):

при зміні значення у ViewModel → View отримує сповіщення й оновлює UI;
при зміні у View → система викликає setter ViewModel і передає нове значення.

3. Що відбувається покроково

Користувач вводить текст у поле вводу.
UI-фреймворк (через binding-механізм) викликає setter у ViewModel.
ViewModel оновлює свою спостережувану властивість.
Усі підписані View (або інші компоненти) отримують сповіщення й змінюють відображення.

Таким чином - усе залишається синхронним без ручного коду.

4. Переваги такого зв'язку

Немає потреби вручну оновлювати UI або передавати значення. Зменшується кількість шаблонного коду ("клею" між шарами). Інтерфейс завжди відображає актуальний стан даних. ViewModel можна тестувати окремо від інтерфейсу.

5. Підтримка на різних платформах

Платформа	Механізм прив'язки
Android	`LiveData`, `DataBinding`, `ObservableField`, `Flow`
.NET / WPF / MAUI	`INotifyPropertyChanged`, `Binding Mode=TwoWay`
Vue.js / Angular / React	реактивні властивості (`v-model`, `ngModel`, `useState`)
SwiftUI	анотації `@State`, `@Binding`, `@Published`

Підсумок:

Двостороння прив'язка даних дозволяє View і ViewModel "спілкуватися" без прямих викликів.

ViewModel зберігає спостережувані властивості, View прив'язує до них елементи, а фреймворк автоматично синхронізує обидва напрямки - логіка та інтерфейс залишаються в постійній злагоді без зайвого коду.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.