Что такое ViewModel во Vue и как он работает

Что проверяют

Этот вопрос чаще задают не ради определения, а чтобы услышать, как вы раскладываете код экрана по слоям. Проверяют, понимаете ли вы, что во Vue отдельного класса ViewModel нет, и умеете ли объяснить, что тогда играет его роль.

Как отвечать

MVVM делит код на три части: Model это данные и бизнес-правила, View это разметка, ViewModel это состояние конкретного экрана плюс логика его отображения. Во Vue роль ViewModel исполняет сам компонент: реактивное состояние, вычисляемые свойства, наблюдатели и обработчики событий. View это шаблон, привязанный к этому состоянию директивами, а связь между ними держит система реактивности.

Практический смысл такой: в компоненте живёт то, что нужно экрану, а не то, что пришло с сервера. Флаг загрузки, отфильтрованный и отсортированный список, признак доступности кнопки, текст ошибки для пользователя. Доменные правила и запросы остаются отдельным слоем.

• computed для производных значений: результат кэшируется по зависимостям и пересчитывается только при их изменении;
• watch для побочных эффектов, а не для пересчёта значений;
• composable вида useSomething для переиспользуемого куска логики. Это и есть способ вынести ViewModel из компонента и покрыть её тестами без монтирования разметки.

Где спотыкаются

Кладут прямо в компонент запросы к API, разбор ответа и обработку ошибок. Экран перестаёт переноситься куда-либо без всего сетевого слоя, а тест на простую логику фильтрации требует поднимать заглушки HTTP.

Держат производное значение в отдельной переменной и обновляют его через watch. Появляются два источника правды, которые рано или поздно расходятся, хотя ровно для этого существует computed.

Пересказывают MVVM по опыту Android или WPF, где ViewModel это отдельный класс с явным контрактом, и утверждают, что во Vue устроено так же. Достаточно уточняющего вопроса про setup, ref и reactive, чтобы стало понятно: работа шла по аналогии, а не по документации Vue.