What is the difference between mvvm and mvc in vue

Difference: 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: Windows 7 system, vue version 2.9.6, DELL G3 computer.

VUE is developed based on the MVVM design pattern. Today we will talk about the difference between MVC and MVVM.

MVC：

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

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

MVC two methods, picture description:

Code example:

We make a very simple p display hidden effect, click toggle to switch Show and hide below p

html:

<div id="box">
        <button class="btn">toggle</button>
        <button class="btn2">big</button>
        <div class="box">
 
        </div>
    </div>

JS:

The following is the JS we write without design mode. This way of writing is not It is conducive to maintenance and is purely process-oriented to write code:

        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;
            }
        }

How to write MVC:

         //view
        let boxDom = document.getElementsByClassName("box")[0];
        //model
        let model = {
            isShow:true,
            isBig:false
        }
 
        //controller 业务逻辑
        function Controller(){
            this.init();//初始化
        }
        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;
                    //更改视图了
                    that.render();
                }
                btn2.onclick = function(){
                    model.isBig = true;
                    //更改视图了
                    that.render();
                }
            },
            render:function(){//数据驱动视图的更改
                boxDom.style.display = model.isShow?"block":"none";
                boxDom.style.width = model.isBig?"300px":"100px";
            }
        }
 
        new Controller();//初始化一下

Although the MVC code is relatively long, it is very convenient to use in the future, as long as it has the same effect and is used again OK

Let’s talk about MVVM

MVVM:

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

vue uses the mvvm mode, which is derived from mvc

MVVM makes the direct relationship between the view and the viewmodel particularly close, in order to solve the problem of untimely feedback from mvc

Explain the picture:

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)

Vue adopts data hijacking & subscription publishing mode:

When vue creates a vm, it will configure the data in the instance, then use Object.defineProperty to process the data, and add getter and setter methods to the data. When the data is obtained, the corresponding getter method will be triggered. When the data is set, the corresponding setter method will be triggered, thereby further triggering the watcher method on the vm. Then when the data is available, the vm will further update the view.

2. Data hijacking:

vue.js uses data hijacking combined with the publisher-subscriber model to hijack each property through Object.defineProperty() setter, getter. Publish messages to subscribers when data changes, triggering response listening callbacks.

Object.defineProperty code example:

//Object.defineProperty  因为使用了ES5的很多特性 
        let _data = {}
        let middle = 111;
        Object.defineProperty(_data,"msg",{
            get(){
                return middle;
            },
            set(val){
               middle = val;
            }
        });
 
        console.log(_data.msg);//获取数据的时候，会调用对应对象属性的getter方法
        _data.msg = 222;//设置数据的时候，会调用对应对象属性的setter方法
        console.log(_data.msg);

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 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.

Related recommendations: "vue.js Tutorial"

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