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:
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:
- Developers call the same code in large numbers DOM API，Cumbersome processing, operation redundancy makes the code difficult to maintain.
- a large number ofDOMThe operation reduces the page rendering performance, slows down the loading speed, and affects the user experience.
- 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 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 in
ModelBusiness 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 is
two-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.
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.