> Что такое ViewModel во Vue и как он работает (Vue.js)

Короткий ответ

ViewModel во Vue - это часть архитектуры MVVM, которая связывает данные (Model) и представление (View). Во Vue роль ViewModel выполняет экземпляр компонента: он хранит реактивные данные, методы и computed-свойства, автоматически синхронизируя их с DOM через реактивную систему и виртуальный DOM.

Подробное объяснение

Vue.js следует паттерну MVVM (Model-View-ViewModel), где ViewModel - это центральный слой, управляющий состоянием и поведением компонента. Во Vue ViewModel представлена объектом компонента, который содержит:

• data - реактивные свойства, доступные в шаблоне
• computed - вычисляемые свойства, кэшируемые до изменения зависимостей
• methods - функции для обработки событий и логики
• watchers - наблюдатели за изменениями данных

ViewModel автоматически отслеживает зависимости между данными и DOM через реактивную систему Vue. При изменении данных Vue обновляет только те части DOM, которые от них зависят, используя виртуальный DOM для эффективного применения изменений.

На практике

При разработке на Vue вы работаете с ViewModel через опции компонента или Composition API. В Options API ViewModel определяется объектом с полями data, methods, computed. В Composition API используется функция setup(), где вы объявляете реактивные переменные и функции.

ViewModel изолирует бизнес-логику от шаблона: вы не манипулируете DOM напрямую, а только изменяете данные, и Vue сам обновляет интерфейс. Это упрощает тестирование и поддержку кода.

Пример кода

<template>
  <div>
    <p>{{ greeting }}</p>
    <button @click="updateGreeting">Изменить</button>
  </div>
</template>

<script>
export default {
  // ViewModel начинается здесь
  data() {
    return {
      message: 'Привет, мир!'
    }
  },
  computed: {
    greeting() {
      return this.message.toUpperCase()
    }
  },
  methods: {
    updateGreeting() {
      this.message = 'Новое приветствие'
    }
  }
}
</script>

Как отвечать на собеседовании

Начни с определения ViewModel как связующего звена между данными и UI. Упомяни, что во Vue это реализовано через реактивность и виртуальный DOM. Приведи пример из Options API или Composition API. Подчеркни, что разработчик работает только с данными, а Vue берёт на себя обновление DOM.

Что проверяет интервьюер

• Понимание архитектуры MVVM и роли ViewModel
• Знание реактивной системы Vue
• Умение объяснить, как Vue связывает данные и шаблон
• Осознание разницы между data, computed и methods

Типичные ошибки

• Путать ViewModel с Model (данными) или View (шаблоном)
• Думать, что ViewModel - это отдельный класс, а не часть компонента
• Не упоминать реактивность и виртуальный DOM как ключевые механизмы
• Сводить ответ только к синтаксису без объяснения принципа работы