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

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

Понимаете ли, откуда во Vue взялся термин из MVVM и что за ним стоит технически: экземпляр компонента с реактивным состоянием, который связывает данные и DOM. Заодно смотрят, отличаете ли вы Vue 2 от Vue 3, потому что механика реактивности там разная.

Как отвечать

ViewModel это буква VM в MVVM, в старой документации так называли экземпляр приложения. Сегодня ViewModel в приложении на Vue это сам экземпляр компонента: его реактивное состояние, вычисляемые свойства, методы и хуки жизненного цикла. Шаблон декларативно описывает, как состояние превращается в разметку, а перерисовку нужных кусков DOM фреймворк берёт на себя.

Механика: при рендере трекер запоминает, какие реактивные свойства прочитал эффект рендера. Запись в такое свойство помечает эффект грязным и ставит его в очередь, обновление происходит пакетом на следующем тике. В Vue 3 перехват чтения и записи идёт через Proxy, в Vue 2 через Object.defineProperty, отсюда известные ограничения второй версии: новый ключ объекта и запись по индексу массива не отслеживались, приходилось звать Vue.set.

const Counter = {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    return { count, double, inc: () => count.value++ }
  }
}

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

Называют связывание двусторонним по умолчанию. Поток данных односторонний: состояние идёт в шаблон, обратно приходят события. v-model это синтаксический сахар над парой «значение плюс обработчик», а не отдельный механизм.

Говорят, что ViewModel управляет жизненным циклом компонента. Всё наоборот: циклом управляет фреймворк, компонент только подписывается хуками. Тут же путают имена из разных версий, destroyed против unmounted.

Отвечают про состояние одним словом «Vuex». Vuex переведён в режим поддержки, для новых проектов рекомендуют Pinia, а большая часть состояния вообще живёт в самом компоненте, и глобальный стор нужен далеко не всегда.