What is the difference between mvvm and mvc in vue

This article introduces the knowledge about the difference between mvvm and mvc in vue. During the operation of the actual case, many people will encounter such a dilemma. Next, let the editor lead you to learn how Handle these situations! I hope you read it carefully and learn something!

The difference between mvvm and mvc: 1. The communication of each part of mvvm is two-way, while the communication of each part of mvc is one-way. 2. MVVM realizes the automatic synchronization of view and 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, but the view layer corresponding to the attribute will automatically change after the attribute is changed.

What is MVC

MVC is a design pattern:

M (Model): Model layer. It is the part of the application program used to process application data logic, and the model object is responsible for accessing data in the database;
V (View): view layer. It is the part of the application that processes data display, and the view is created based on model data;
C (Controller): control layer. It is the part of the application that handles user interaction. The controller accepts user input and calls the model and view 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 process the request, and then decides which view to use to display the returned data.

What is MVVM

The M of MVVM in the vue framework is the post The data at the end, V is the node tree, and VM is the new Vue ({}) object

M (Model): model layer. It is the data object related to business logic, which is usually mapped from the database. We can say that 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 one by one, so it is necessary to define a data object that specifically corresponds to the controls on the View. while VThe responsibility of viewModel is to encapsulate the model object into an interface data object that can display and accept input.

The connection between View and ViewModel is established through two-way binding, so that when View (view layer) changes, it will automatically update to ViewModel (view model), and vice versa The same is true.

Advantages of MVVM

1, mvc and mvvm are both a design idea. The main reason is that the Controller in mvc has evolved into the viewModel in mvvm. Mvvm mainly solves the problem that a large number of DOM operations in mvc reduce page rendering performance and slow down loading speed.

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

3. On the whole, MVVM is much simpler than MVC, and we don't need to use selectors to frequently operate 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 operations should be implemented in the Controller. .

What is the difference between MVC and MVVM

Difference 1:

The communication of each part of mvvm is Two-way, while the communication between various parts of MVC is one-way.

Difference two:

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

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

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

MVVM responsive principle

• vue is a method of using data hijacking to cooperate with the publisher-subscriber model,

• Using Object.defineProperty() to hijack the getter and property of each propertysetter,

• When the data changes, publish a message to the dependent collector (subs in dep), to notify (notify) the observer, and make a corresponding Callback function, update view

• MVVM is used as the binding entry, integrating Observer, Compile and Watcher,

• Use Observer to monitor model data changes,

• Use Compile to parse and compile template instructions,

• Finally, use Watcher to set up a communication bridge between Observer and Compile,

• Achieve data change Observer)=>view update; view Two-way binding effect of interaction change=>data model change.