Shulou(Shulou.com)06/03 Report--

This article is about the difference between MVC and MVVM in web interview and why Vue does not fully comply with MVVM. I think it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

The difference between MVC and MVVM mentioned above

First of all, both of these are just an idea, 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.

Overview of MVC

1. The data is to be rendered to the view

   defines a template engine

   gets the data

   then renders the data to the template engine

two。 View operation controller

   adds a click event to the button on the page

   calls a method in an event

The    controller sends a request to modify the data again

3. Send a network request to modify data by method

   sends a network request to get the modified data.

   then renders the data to the view

Advantages and disadvantages

Advantages:

Reduce coupling to facilitate code maintenance and expansion

Disadvantages:

After each data update, it is necessary to operate dom, which affects the efficiency of development.

MVVM

Overview

Preface

In order to improve the efficiency of development, a new idea has emerged: MVVM. Its biggest feature: bidirectional data binding

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

MVVM is a progress of MVC and a substitute for MVC.

Features:

When M changes, V automatically changes. When V changes, M changes automatically.

Relationship:

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, reducing the programmer's workload and allowing programmers to 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 own account on the official website of Vue, but the author did not give the reason. According to the reference and self-arrangement, the author thinks that there are two reasons.

Reason 1: mvvm refers to the "model-view-view model", which should allow the "model" and "view" to achieve complete decoupling, but vue provides an attribute: ref, you can get the dom object through ref, and manipulate the view directly through ref. At this point, it violates mvvm.

Reason 2: the following figure shows that structurally, the "data layer" is included in the "data model layer", and the two parts are not completely independent.

These are the differences between MVC and MVVM in web interviews and why Vue does not fully comply with MVVM. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.