MVVM паттерн в Vue

MVVM (Model-View-ViewModel) — архитектурный паттерн, предназначенный для разделения логики приложения и представления. В контексте Vue.js он реализуется через реактивные данные, связывание с DOM и декларативное обновление интерфейса.

Основные компоненты MVVM

  • Model Представляет данные приложения и бизнес-логику. В Vue.js это объекты, содержащие состояние компонента (data) и методы работы с ним (methods, computed). Model отвечает за хранение состояния, но не за его отображение.

  • View Интерфейс пользователя, который отображает данные. В Vue это шаблоны (template), содержащие HTML с директивами для динамического связывания данных. View не содержит логики обработки данных, она только отображает текущее состояние Model.

  • ViewModel Посредник между Model и View. В Vue.js это реактивная система, которая отслеживает изменения в данных и автоматически обновляет DOM. ViewModel реализован через объект Vue, связывающий data и template через двустороннее связывание (v-model) и реактивные вычисления (computed).

Реактивность и связывание данных

Vue.js использует реактивную систему на основе геттеров и сеттеров объектов. Когда значение в data изменяется:

  1. Vue перехватывает изменение через прокси (Proxy) или Object.defineProperty.
  2. ViewModel уведомляет все связанные компоненты о необходимости обновления.
  3. DOM обновляется автоматически, без явного вызова функций рендеринга.

Пример реактивного связывания:

const app = Vue.createApp({
  data() {
    return {
      message: 'Привет, Vue!'
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
});

app.mount('#app');

В шаблоне:

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

Изменение значения в input мгновенно обновляет параграф благодаря реактивной системе Vue.

Директивы как инструмент MVVM

Vue использует директивы для связи View с Model:

  • v-bind — связывает атрибуты DOM с данными.
  • v-model — двустороннее связывание данных с элементами формы.
  • v-if, v-show — условное отображение элементов.
  • v-for — циклическое отображение списков.

Директивы создают декларативное описание интерфейса, освобождая разработчика от ручного обновления DOM и поддерживая чистую архитектуру MVVM.

Вычисляемые свойства и наблюдатели

  • Computed Позволяют создавать свойства, зависимые от данных, которые кэшируются и автоматически пересчитываются при изменении зависимостей. Пример:
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}
  • Watchers Позволяют отслеживать изменения данных и выполнять побочные эффекты. Например:
watch: {
  message(newVal, oldVal) {
    console.log(`Сообщение изменилось с "${oldVal}" на "${newVal}"`);
  }
}

Computed и watch обеспечивают гибкую реактивную связь между Model и ViewModel.

Компонентная структура и MVVM

Каждый Vue-компонент реализует собственный MVVM:

  • data — Model компонента.
  • template — View компонента.
  • methods, computed, watch — ViewModel компонента.

Такое разделение позволяет легко масштабировать приложение, переиспользовать компоненты и поддерживать читаемость кода.

Преимущества использования MVVM в Vue

  • Четкое разделение ответственности между данными и интерфейсом.
  • Автоматическое обновление DOM при изменении состояния.
  • Декларативный синтаксис упрощает работу с интерфейсом.
  • Гибкая реактивность через computed и watchers.
  • Поддержка компонентного подхода, что облегчает модульное построение приложений.

Итоговая структура MVVM в Vue

Model        - data, state
View         - template, HTML-разметка
ViewModel    - computed, methods, watch

Связь между компонентами реализуется через props, emit и глобальные состояния (Vuex или Pinia), сохраняя принципы MVVM на уровне всего приложения.

Reactivity, declarative binding и компонентная структура делают Vue.js одним из самых удобных инструментов для реализации MVVM в современных веб-приложениях.

Оглавление