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

This article mainly explains "what is the difference between mvvm and mvc in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between mvvm and mvc in vue".

Differences: 1. The communication of each part of mvvm is bi-directional, while the communication of each part of mvc is unidirectional. 2. MVVM realizes the automatic synchronization of view and model, that is, when the model attribute changes, there is no need to manually manipulate the dom element to change the view display, but the corresponding view layer of the attribute will change automatically after changing the attribute.

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

VUE is developed based on the design pattern of MVVM, and today I'll talk about the difference between MVC and MVVM.

MVC:

M:model data model layer v:view view layer c:controller controller

Principle: C layer needs to control the data of model layer to be displayed in view layer

There are two ways to MVC. Picture caption:

Code example:

We do a very simple p show hidden effect, click toggle can switch below p show hide

Html:

Toggle big

JS:

Here is the JS that we write without design patterns, which is not good for maintenance and is purely process-oriented:

Let btn = document.getElementsByClassName ("btn") [0]; let boxDom = document.getElementsByClassName ("box") [0]; let flag = true; btn.onclick = function () {if (flag) {boxDom.style.display = "none"; flag = false;} else {boxDom.style.display = "block" Flag = true;}}

MVC is written as follows:

/ / view let boxDom = document.getElementsByClassName ("box") [0]; / / model let model = {isShow:true, isBig:false} / / controller business logic function Controller () {this.init () / / initialize} Controller.prototype = {constructor:Controller, init:function () {this.addEvent ()}, addEvent:function () {let btn = document.getElementsByClassName ("btn") [0]; let btn2 = document.getElementsByClassName ("btn2") [0] Let that = this; btn.onclick = function () {model.isShow =! model.isShow; / / changed the view that.render ();} btn2.onclick = function () {model.isBig = true / / changed that.render ();}}, render:function () {/ / data-driven view changes boxDom.style.display = model.isShow? "block": "none"; boxDom.style.width = model.isBig? "300px": "100px" }} new Controller (); / / initialize

Although the MVC code is relatively long, it is very convenient to use in the future, as long as the same effect is used.

Let's talk about MVVM.

MVVM:

M:model data model layer v:view view layer vm:ViewModel

The mvvm pattern is used in vue, which is derived from mvc

MVVM makes the direct relationship between the view and viewmodel particularly close, in order to solve the problem that mvc feedback is not timely.

Picture illustration:

When it comes to MVVM, we need to talk about the principles of two-way binding and data hijacking.

1. What is the principle of two-way binding?

(update the model layer when the view changes, update the view layer when the model layer changes)

The data hijacking-subscription publishing model is adopted in vue:

When vue creates a vm, it configures the data in the instance, and then uses Object.defineProperty to process the data, adding getter and setter methods to the data. When the data is obtained, the corresponding getter method is triggered, and when the data is set, the corresponding setter method is triggered, which further triggers the watcher method on the vm, and then the data is obtained, and the vm further updates the view.

2. Data hijacking:

Vue.js uses data hijacking combined with publisher-subscriber mode to hijack the setter,getter of each attribute through Object.defineProperty (). When the data changes, a message is issued to the subscriber, triggering the monitoring callback of the response.

Object.defineProperty code example:

/ Object.defineProperty because it uses many features of ES5 let _ data = {} let middle = 111; Object.defineProperty (_ data, "msg", {get () {return middle;}, set (val) {middle = val;}}); console.log (_ data.msg) / / when the data is obtained, the getter method of the corresponding object property _ data.msg = 222leading / when the data is set, the setter method console.log (_ data.msg) of the corresponding object property is called

Summary:

The biggest difference between mvvm and mvc:

MVVM realizes the automatic synchronization of view and model, that is, when the model attribute changes, we no longer need to manually manipulate the dom element to change the view display, but the corresponding view layer of the attribute will change automatically after changing the attribute.

Thank you for your reading, the above is "what is the difference between mvvm and mvc in vue?" after the study of this article, I believe you have a deeper understanding of the difference between mvvm and mvc in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.