A brief introduction to front-end MVC and MVVM

A brief introduction to front-end MVC and MVVM

MVC

I. Overview

The full name of MVC is Model View Controller, which is the abbreviation of model (model)-view (view)-controller (controller). It is a software design specification that organizes code by separating business logic, data, and interface display. Improve and personalize custom interfaces and user interactions without rewriting business logic.

• View (View): user interface.
• Controller (Controller): business logic
• Model (Model): data storage

2. Communication method

1. View sends instructions to Controller

2. After the Controller completes the business logic, it requires the Model to change the state

3. Model sends new data to View, and user gets feedback

MVC communication is one-way:

浏览器发送请求

Contorller和Model交互获取数据

Contorller调用View

View渲染数据返回

MVVM

I. Overview

MVVM (Model-View-ViewModel) is an architectural pattern based on front-end development .

The core is to provide two-way data binding between View and ViewModel . There is no direct connection between View and Model, but interaction through ViewModel. View changes are automatically reflected on ViewModel, and vice versa. This ensures that View and Model Data Consistency.

• M----> model represents the data model layer, and the business logic of data modification and operation can also be defined in the Model;
• V-----> view The view layer (interface) is used to display data, and it is responsible for converting the data model into UI display.
• VM----> ViewModel (view model), is an object that synchronizes View and Model.

2. Communication method

There is no direct connection between View and Model, but interaction through ViewModel.

ViewModel connects the View layer and the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention. Therefore, developers only need to focus on business logic and do not need to manually manipulate DOM . It is necessary to pay attention to the synchronization of data status, and the maintenance of complex data status is completely managed by MVVM.

The difference between MVC and MVVM

1. The difference between MVC and MVVM is not that VM completely replaces C. The purpose of ViewModel is to extract the business logic displayed in the Controller, not to replace the Controller. It still exists, and other view operations should be implemented in the Controller. That is to say, MVVM realizes the reuse of business logic components.
2. MVVM uses data to display the view layer instead of node operations, and VM realizes it through data two-way binding.
3. MVVM solves the problem that a large number of DOM operations in MVC lead to reduced page rendering performance, slower loading speed, and affect user experience.
4. The advantage of MVVM is that you don't need to manipulate the DOM yourself, the data is responsive, and once the data changes, the interface is automatically updated.