Recently, I reviewed the VUE document again and saw the MVVM model mentioned at the beginning. I felt that I could not explain clearly what MVVM is, so I searched several articles and found that this article is the most clear and easy to understand, which is suitable for beginners to learn what MVVM is. Therefore, a special record, share with you, but also easy to go back to learn many times in the future, do not have to find all kinds of articles. The original link: www.jianshu.com/p/6aeeecd64… I believe that when you read this article, you have looked up a lot of information on the Internet, have a general understanding of MVVM, but the concept is not clear. This article isn’t long, but I hope it helps you understand MVVM.

When approaching or using a new technology, the most important questions are: How and why? The so-called know is to know why. In a discussion with a veteran developer of many years, he said that MVVM is a subversion of MVC. I knew it was probably just a question of the accuracy of a person’s words, although I did not interrupt him and listened to him carefully. I felt that he could use it, but perhaps I had not tried to design such a structure myself, because I did not agree with the word “subversion”. So, what is MVVM?

What is MVVM? MVVM is an enhanced VERSION of MVC, essentially no different from MVC, just a change in the location of the code, this is my definition of MVVM, if you don’t know what MVC is, please read on.

If you’ve done iOS development, you’re probably familiar with Model, View, and Controller, which stand for data, View, and Controller, respectively. Of course, developers in other directions should not be too unfamiliar, in fact, this is just a design idea, the specific language and development is not important. MVC is short for these words, so how do they work together? Look at the picture below

This is a picture taken from the Apple developer documentation, showing the relationship between the three, and briefly describing what they do

Model: Data Model used to store data

View: A View interface used to display the UI and respond to user interactions

Controller: A Controller (butler role) that listens for changes in model data, controls view behavior, and handles user interactions

Their work and relationships seem so clear that it’s a very good design idea. Yes, first of all, MVC is a very good architectural idea that you have to master.

MVVM Brief If MVC is so good, why use MVVM? Let’s first look at what MVVM is.



The diagram above describes the basic structure of MVVM, what you see, is there a ViewModel more than MVC architecture, yes, this ViewModel, which is the core idea of MVVM over MVC. In the development process, due to changes or additions of requirements, the project became more and more complicated and the code volume became more and more large. At this time, we would find it difficult to maintain MVC. The first thing that was mocked most was that the abbreviation of MVC was changed to Massive view-controller (meaning heavy Controller).

Because Controller is mainly used to deal with all kinds of logic and data transformation, the Controller of complex business logic interface is very large and difficult to maintain, so someone thought of separating the data and logic processing part of Controller and managing it with a special object, which is ViewModel. It’s a bridge between Model and Controller. When people tried this approach, they found that there was very little code in the Controller, which was easy to test and maintain, and only needed data binding between the Controller and the ViewModel, which gave rise to the MVVM craze.

Is MVVM worth using? It’s highly recommended and can be directly extended to your existing MVC, so let’s look at the pros and cons first

Advantages:

1.Controller is clear and concise: The ViewModel separates most of the Controller code, making it clearer and easier to maintain.

2. Convenient testing: Most of the bugs in the development come from logic processing. Since the ViewModel separates a lot of logic, unit tests can be constructed on the ViewModel.

3. Development decoupling (two examples) :

A. One person is responsible for logic implementation and the other person is responsible for UI implementation;

B. In agile development, we often do not wait for the back-end interface to be developed, but we can usually complete the Controller and View without the interface.

Disadvantages:

1. It looks like code will be more than MVC

2. Each Controller needs to be bound. If it is not handled properly, there will be a feeling of “painting a tiger is not anti-dog”

To sum up, the amount of code written by MVVM is not less than MVC in the actual use of the process, and sometimes it will be more. After all, there is a data binding process, but the logic will be much clearer, for the multi-person development team, there are many advantages, disadvantages and advantages are not worth mentioning, in short, recommended to use