Understanding of MVVM

The guide language

We all know that Vue is a framework for MVVM, but what is MVVM? Today we are going to understand what MVVM is.

componentization

The concept of “componentization” has been around for a long time, for example asp, JSP, and PHP were componentized in the web1.0 phase. There is componentization in NodeJS as well. The following is a section of NodeJS code to illustrate the characteristics of “componentization”. Nodejs code screenshot:

According to the code screenshot above, we can see:For the corresponding module, we go to import the corresponding template file, and then pass in the required data.

Let’s compare componentization in VUE again:

By comparing traditional componentization with vUE componentization, we can see that the logic is the same, importing the required template and passing in the data, but there is one essential difference:Vue component updates are automatic, whereas traditional componentized component updates often require manual manipulation of the DOM. The reason for this difference: Vue has data-driven views!

Data-driven view

What is a data-driven view? Data-driven views: When we want to change something on a page, we don’t need to manipulate the DOM ourselves, we just need to change the corresponding data, and the VUE framework helps us re-render the view based on the data. Vue implements data-driven views based on MVVM!

MVVM

MVVM: model-view-viewModel MVVM: model-view-viewModel MVVM: model-view-viewModel

As can be seen from the picture: The view and Model are associated through the ViewModel provided by VUE. When the data of our model is changed, it can be immediately reflected to the View layer through the ViewModel, and some DOM operations in the View can also be reflected to the Model layer through the viewmModel.

conclusion

My understanding of componentization and data-driven views further deepened my understanding of MVVM. So, see you next time. Good good study, day day up!