What are the differences between mvvm and mvc in vue

The difference between mvvm and mvc: 1. The communication between each part of mvvm is two-way, while the communication between each part of mvc is one-way. 2. MVVM realizes automatic synchronization between the view and the model. That is, when the model attribute changes, there is no need to manually operate the dom element to change the display of the view. Instead, after changing the attribute, the view layer corresponding to the attribute will automatically change.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is MVC

---

MVC is a design pattern:

M (Model): Model layer. is the part of the application used to process application data logic. The model object is responsible for accessing data in the database;
V (View): View layer. is the part of the application that handles data display. The view is created based on the model data;
C (Controller): control layer. is the part of the application that handles user interaction. The controller accepts user input and calls models and views to complete the user's needs. The controller itself does not output anything or do any processing. It just receives the request and decides which model component to call to handle the request, and then determines which view to use to display the returned data.

What is MVVM

---

What is MVVM in the vue framework M is the back-end data, V is the node tree, and VM is the new Vue({}) object

M (Model): Model layer. is the data object related to business logic, which is usually mapped from the database. We can say it is the model corresponding to the database.
V (View): View layer. is the displayed user interface.
VM (ViewModel): View model layer. The bridge connecting view and model. Because the data in the Model layer often cannot directly correspond to the controls in the View, therefore, it is necessary to define another data object to specifically correspond to the controls on the View. The responsibility of ViewModel is to encapsulate the model object into an interface data object that can display and accept input.

View and ViewModel are connected through two-way binding, so that when the View (view layer) changes, it will automatically update to ViewModel (ViewModel) and vice versa.

Advantages of MVVM

1, mvc and mvvm It's all a design idea. The main thing is that the Controller in mvc evolves into the viewModel in mvvm. mvvm mainly solves the problem that a large number of DOM operations in mvc reduce the page rendering performance and slow down the loading speed.

2. The biggest difference between MVVM and MVC is that it realizes automatic synchronization of View and Model: when the properties of the Model change, we no longer need to manually operate the Dom element to change the View The display will change automatically.

3. Overall, MVVM is much simpler than MVC. We no longer need to use selectors to frequently operate the DOM.

MVVM does not completely replace C with VM. The purpose of ViewModel is to extract the business logic displayed in the Controller, not to replace the Controller. Other view operation services should still be placed in the Controller. Implement in.

What is the difference between MVC and MVVM

---

Difference 1:

Communication between various parts of mvvm It is two-way, while the communication between various parts of MVC is one-way.

Difference 2:

The biggest difference between MVVM and MVC is that it realizes automatic synchronization of View and Model

• When the Model property changes, there is no need to manually operate the Dom element to change the display of the View.

• After changing the attribute, the display of the View corresponding to the attribute will automatically change

MVVM responsive principle

---

• vue isusing data hijacking to cooperate with the publisher-subscriber model way,
  • hijack the getters and setters of each property through Object.defineProperty(),
  • when the data changes, publish a message to the dependency collector (in dep subs), to notify the observer, make the corresponding callback function, and update the view
• MVVM serves as the entry point for binding, integrating Observer, Compile and Watcher,
  • Use Observer to monitor model data changes,
  • Use Compile to parse and compile template instructions,
  • Finally use Watcher to build a communication bridge between Observer and Compile,
  • Achieve the two-way binding effect of Data change Observer) =>View update; View interactive change =>Data model change.

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What are the differences between mvvm and mvc in vue. For more information, please follow other related articles on the PHP Chinese website!