foreword
Everyone knows about MVC, but it is confusing when compared with MVVM. The following is an example of MVC with JavaWeb, and an example of MVVM with Vue. Try to figure out MVC and MVVM.
MVC pattern (partial backend, take JavaWeb as an example)
The MVC pattern is a design pattern that is more inclined to the Java Web backend. In my previous article, I talked about the relationship between this mode and the SSM framework. The article link is given below:
The relationship between MVC architecture and SSM framework
The following two pictures are taken from the above, the details can be directly moved to this blog
MVVM mode (partial front-end, take Vue as an example)
Since this mode is more inclined to front-end concepts, if you want to understand this mode, you must know a little bit of front-end knowledge. Only Vue is used here as an example.
A picture to explain MVVM (the picture comes from Shang Silicon Valley courseware, I am doing secondary processing):
The Data Bindings in the above figure are reflected in the code (through the VM, M is bound to the View):
The DOM Listeners in the image above are embodied in the code (by VM, binding V to M):
Execution effect:
At the same time, binding M to V, and V to M, is to achieve two-way binding.
VM (that is, ViewModel) is actually the Vue instance itself, which is responsible for binding View and Model
This is the MVVM embodiment of Vue! To understand thoroughly, you need to have a detailed understanding of ViewModel, two-way binding, and Vue instances. Other front-end frameworks have different interpretations of MVVM, but the principles and ideas are the same.
Finally, look at Wikipedia's definition of it:
postscript
This article only reflects the MVC architecture with JavaWeb, and the MVVM architecture with Vue. Other technology stacks will have different interpretations of MVC and MVVM, but the principles and ideas are the same.
The above is my personal opinion, welcome to discuss and correct me.