MVVM pattern understanding

Why does MVVM appear?

MVCThe abbreviation of model view controller is model view controller, which means that a standard web application consists of these three parts:

• ViewUsed to present data to users in some way

• ModelIt’s actually data

• ControllerReceive and process the request from the user, and return the model to the user

WThe view layer of EB application is relatively simple, and the data required by the front end can basically be handled well at the back end. The view layer is mainly for presentation. At that time, the controller was advocated to handle complex business logic, so the view layer is relatively lightweight, which is what is calledThin client idea

thisThe MVC architecture mode is OK for simple applications, and also conforms to the layered idea of software architecture. But in fact, with the continuous development of H5, people prefer to use H5 to develop applications comparable to native, or close to the experience effect of native apps. Therefore, the complexity of front-end applications is different from that in the past. At this time, front-end development exposes three pain points:

1. Developers call the same code in large numbers DOM API，Cumbersome processing, operation redundancy makes the code difficult to maintain.
2. a large number ofDOMThe operation reduces the page rendering performance, slows down the loading speed, and affects the user experience.
3. When ModelFrequent changes, developers need to actively update toView ； When the user’s operation causes ModelWhen changes occur, developers also need to synchronize the changed data toModelIn,Such work is not only cumbersome, but also difficult to maintain complex and changeable data states.

At this timeMVVM The emergence of has perfectly solved the above three problems.

MVVM mode

MVVM is the abbreviation of model view view model. The design principle of MVVM is based on MVC, so MVVM is not an innovation, but a transformation at best. Among them, ViewModel is a small innovation

• ModelThe layer represents the data model and can also be used inModelBusiness logic (data) defining data modification and operation in

• ViewRepresents the UI component, which is responsible for transforming the data model into UI presentation (view)

• ViewModelIs an object (bridge) that synchronizes view and model

stayUnder MVVM architecture, there is no direct connection between view and model, but interaction through ViewModel. The interaction between model and ViewModel istwo-wayTherefore, the changes of view data will be synchronized to the model, and the changes of model data will be immediately reflected to the view.

VViewModel connects the view layer and model layer through two-way data binding, and the synchronization between view and model is completely automatic without human interventionYou only need to pay attention to business logic, do not need to manually operate DOM, and do not need to pay attention to the synchronization of data state. Complex data state maintenance is completely managed by MVVM.

Vue. JS is a JavaScript library that provides MVVM style bidirectional data binding, focusing on the view layer. Its core is the VM in MVVM, that is, ViewModel. ViewModel is responsible for connecting view and model to ensure the consistency of view and data. This lightweight architecture makes front-end development more efficient and convenient.

What is the difference between MVVM and MVC?

In fact, MVC and MVVM are not very different. They are both design ideas. Mainly, the controller in MVC evolves into ViewModel in MVVM. MVVM mainly solves the problem that a large number of DOM operations in MVC reduce page rendering performance, slow loading speed and affect user experience.

Reference link:

https://www.cnblogs.com/goloving/p/8520030.html

https://www.cnblogs.com/gaosong-shuhong/p/9253973.html