MVVM Pattern
An architectural pattern where a ViewModel mediates between the View and Model, enabling two-way data binding and eliminating direct View-Model coupling.
Description
Model-View-ViewModel is an evolution of MVC designed specifically for modern UI development. The ViewModel acts as an abstraction of the View, exposing data and commands that the View binds to declaratively. When the ViewModel's state changes, the View updates automatically through data binding, and when users interact with the View, those interactions flow back through the ViewModel to the Model. This eliminates the need for imperative DOM manipulation and makes UI logic highly testable.
MVVM was popularized by Microsoft with WPF and Silverlight, and its principles directly influenced modern frontend frameworks. Angular's two-way data binding with ngModel, Vue.js's reactivity system with v-model, and SwiftUI's @State and @ObservedObject property wrappers all implement MVVM concepts. The ViewModel in these frameworks typically corresponds to the component's reactive state and computed properties, which the template (View) binds to declaratively.
The primary advantage of MVVM is testability: since the ViewModel has no direct reference to the View, you can unit test all UI logic—validation, formatting, conditional display, command enablement—without rendering any UI. The trade-off is that two-way data binding can create implicit data flows that are difficult to debug in large applications, which is why patterns like Flux and unidirectional data flow emerged as alternatives for complex state management scenarios.
Prompt Snippet
Implement the ViewModel layer using Vue 3's Composition API with reactive() for complex state objects and computed() for derived values, exposing a clean interface that the template binds to via v-model and event handlers. Keep all formatting, validation, and conditional display logic in the ViewModel composable so it can be unit tested with Vitest without mounting any component. Avoid direct DOM access in the ViewModel—if DOM interaction is unavoidable, abstract it behind a ref-based interface injected via provide/inject.
Tags
Related Terms
MVC Pattern
An architectural pattern that separates an application into three interconnected components: Model (data), View (UI), and Controller (logic).
Observer Pattern
A behavioral design pattern where an object (subject) maintains a list of dependents (observers) and notifies them automatically of state changes.
Component-Level vs Global State
The architectural decision of whether state should live within a single component, be lifted to a shared ancestor, or be placed in a global store based on its scope and consumer count.
Redux / Global State Patterns
A predictable state container pattern where all application state lives in a single store, updated exclusively through dispatched actions processed by pure reducer functions.