Trung BìnhDesign Patterns iconDesign Patterns

MVC, MVP, MVVM là gì? Sự khác biệt và ứng dụng trong frontend hiện đại?

Ba architectural patterns tách UI logic:

  • MVC (Model-View-Controller): Controller xử lý input, update Model, View render Model — Controller và View biết nhau; truyền thống trong server-side (Rails, Laravel, Express).
  • MVP (Model-View-Presenter): Presenter xử lý logic thay Controller, View passive hơn chỉ nhận data từ Presenter và forward events — testable hơn vì Presenter pure class, không phụ thuộc UI.
  • MVVM (Model-View-ViewModel): ViewModel expose Observable state, View bind tự động qua data binding — Vue.js, Angular, WPF, React với hooks.

Trong React hiện đại: Component = View, Custom Hook = ViewModel (logic + state), Service/Store = Model. Data flow: MVC hai chiều; MVVM data binding tự động; MVP qua interface contract.

Xem toàn bộ Design Patterns cùng filter theo level & chủ đề con.

Mở danh sách Design Patterns