Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить ViewModel у MVVM?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**ViewModel** в архітектурі **MVVM (Model-View-ViewModel)** - це центральний шар, який пов'язує **дані (Model)** та **інтерфейс (View)**.
Вона керує всією **презентаційною логікою**: зберігає стан екрана, обробляє дії користувача й оновлює дані, при цьому **нічого не знаючи про сам інтерфейс**.

---

### 1. Основна роль ViewModel

> ViewModel - це "мозок" інтерфейсу.
> Вона знає, **що** має бути показано, але не знає, **як** це виглядає.

---

### 2. Основні обов'язки

#### 1. **Зберігає стан екрана**

Містить усі дані, що потрібні для відображення View: текст, списки, прапорці завантаження, помилки тощо.
Коли ці дані змінюються - View оновлюється автоматично через **data binding**.

*Приклад:*
`isLoading = true` → View показує індикатор завантаження,
`userName = "Марія"` → текст на екрані змінюється без додаткового коду.

---

#### 2. **Обробляє дії користувача**

При кліках, свайпах, введенні даних ViewModel отримує подію від View і вирішує, що робити:

- викликає методи **Model**,
- оновлює стан,
- повідомляє View, що дані змінилися.

*Приклад:*
Користувач натиснув кнопку "Зберегти" → `ViewModel.saveUser()` викликає `Model.save()`,
після завершення оновлює `saveStatus = "успішно"`.

---

#### 3. **Організовує зв'язок між View і Model**

ViewModel - посередник, який перетворює "сирі" дані з моделі в зручний формат для відображення:

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

*Приклад:*
`user.birthDate` з моделі перетворюється на `"25 років"` для View.

---

#### 4. **Нічого не знає про View**

ViewModel не має посилань на UI-компоненти (кнопки, поля, елементи інтерфейсу).
Вона просто надає дані й команди - а View "підписується" на них.

Це дає можливість:

- тестувати ViewModel окремо від інтерфейсу,
- використовувати ту саму ViewModel з різними View (наприклад, екран і віджет).

---

### 3. Принцип роботи (взаємодія шарів)

```javascript
Користувач → View ↔ ViewModel ↔ Model
```

1. Користувач взаємодіє з View (натискає кнопку).
2. View викликає команду в ViewModel (`onLoginClicked()`).
3. ViewModel викликає методи Model (`auth.login()`), отримує результат.
4. Оновлює свої властивості (`isLoading`, `userInfo`).
5. View автоматично оновлюється через *binding*.

---

### 4. Приклад на псевдокоді

```kotlin
class UserViewModel {
    val userName = ObservableField<String>()
    val isLoading = ObservableField<Boolean>()

fun loadUser() {
        isLoading.set(true)
        userRepository.getUser { user ->
            userName.set(user.name)
            isLoading.set(false)
        }
    }
}
```

View просто "підписана" на `userName` і `isLoading` -
і при їх зміні автоматично оновлює інтерфейс.

---

**Підсумок:**

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати396 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.