Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM

Difference between MVC and MVVM

aforementioned

First of all, these two are just a thought, a design pattern

Many programming languages ​​have designed many frameworks based on this idea, such as SpringMVC in Java, ThinkPHP in PHP, Vue, React, Angular in JavaScript, etc.

MVC

Overview

1. Data should be rendered to the view
Defining a template engine
Get the data
Then render the data into the template engine

2. View Action Controller
Add a click event to the button on the page
Calling methods in events
The controller then sends a request to modify the data

3. Send network requests to modify data through methods
Then send a network request to get the modified data
Then render the data to the view

Pros and Cons

advantage:

Reduce coupling and facilitate code maintenance and expansion

shortcoming:

After each data update, DOM needs to be operated, which affects development efficiency;

MVVM

Overview

Preface

In order to improve development efficiency, a new idea emerged: MVVM. Its biggest feature: two-way data binding;

When the data in M ​​changes, the data in V will automatically change. When the data in V changes, the data in M ​​will automatically change.

MVVM is an advancement of MVC and a replacement for MVC.

Features:

When M changes, V changes automaticallyWhen V changes, M changes automatically

relation:

Once M changes, VM will detect the change of M and automatically modify V

Once V changes, VM will detect the change in V and automatically modify M

With MVVH, all DOM operations are performed by VM, which reduces the workload of programmers. Programmers can spend a lot of time on business logic instead of DOM operations.

MVVM Implementer — Vue

Why doesn’t Vue fully comply with MVVM?

The original words come from the author's statement on the Vue official website, but the author did not give a reason. According to my own research and sorting, I think there are two reasons

Reason 1: MVVM refers to "Model-View-ViewModel", which should completely decouple the "model" and "view", but Vue provides a property: ref, through which you can get the DOM object and directly operate the view. This violates mvvm;

Reason 2: As shown in the figure below, structurally, the "data layer" is included in the "data model layer", and the two parts are not completely independent.

The above is the detailed content of the difference between MVC and MVVM in web interviews and the answer to why Vue does not fully comply with MVVM. For more information about MVC and MVVM, please pay attention to other related articles on 123WORDPRESS.COM!