MVVM (Model-View-ViewModel) — это архитектурный паттерн, который структурирует код для разделения логики приложения на три взаимосвязанных компонента:
- Model: Представляет данные и бизнес-логику. Не зависит от UI.
- View: Отображает данные из ViewModel и отправляет действия пользователя (например, клики) в ViewModel. View пассивна и не содержит логики обработки данных.
- ViewModel: Является посредником между Model и View. Предоставляет данные из Model в формате, удобном для отображения View, и обрабатывает действия пользователя, обновляя Model. ViewModel часто использует механизмы привязки данных (data binding) для автоматического обновления View при изменении данных.
Ключевые принципы:
- Двустороннее связывание данных: Изменения в ViewModel автоматически отражаются в View, и наоборот (при использовании соответствующих инструментов).
- Тестируемость: ViewModel легко тестировать изолированно, так как она не связана с UI.
- Разделение ответственности: Четкое разделение логики представления, данных и бизнес-логики упрощает разработку и поддержку.
Используется часто в приложениях с декларативным UI, таких как Vue.js, React (с некоторыми вариациями), Angular.
Пример простейшей структуры:
javascript