Front-end data management (1) the first knowledge of MVVM programming mode

MVVM programming mode

MVVM is essentially an updated version of MVC, so let’s talk about MVC, and before we talk about MVC, we can learn a little bit about the history of the front end.

Introduce the MVC

MVC, i.e.,Model-view-controller model-view-controllerIs a design pattern that separates logic, interface, and data.

In the MVC:

MIs model model, representing business logic;

VView, the view interface that the user sees and can interact with;

CThe purpose of listening for changes in model data, controlling view behavior, and handling user interactions is to ensure that V content can be updated synchronously when M changes.

Take a look at this image from the ios development documentation:

The purpose of using MVC

Separate M and V so that the same program can use different representations.

MVC Implementation Idea

The user operates the View, the Controller layer completes the business processing, the model layer is updated, and the data is displayed in the View layer.

What is the MVVM

MVVM, also known as model-view-ViewModel, is mainly used to process all kinds of logic and data transformation. If the page logic is complex, the Controller will be relatively large and difficult to maintain. So someone thought of taking the data and logic processing part of the Controller out of it and managing it with a special object, the ViewModel, which is a bridge between the Model and the Controller. When people try this approach, they find that the code in the Controller becomes very small and easy to test and maintain, and only need the Controller and ViewModel to do the data binding.

Why use MVVM

Over the last 10 years, we’ve put a lot of traditional server-side code into browsers, resulting in tens of thousands of lines of javascript code that link various HTML and CSS files, but lack formal organization, so more and more developers are using javascript frameworks.

Differences between MVC and MVVM

MVC is one-way communication, view and model must be connected through controller, and ViewModel exists to extract the business logic shown in Controller, rather than replace controller. MVVM realizes the reuse of business logic components, making development more efficient. Clearer structure, increased code reuse.