vue中mvvm和mvc的區(qū)別有哪些

這篇文章主要講解了“vue中mvvm和mvc的區(qū)別有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue中mvvm和mvc的區(qū)別有哪些”吧！

區(qū)別：1、mvvm各部分的通信是雙向的，而mvc各部分通信是單向的。2、MVVM實(shí)現(xiàn)了view與model的自動(dòng)同步，也就是model屬性改變時(shí)，不需要手動(dòng)操作dom元素去改變view的顯示，而是改變屬性后該屬性對(duì)應(yīng)的view層會(huì)自動(dòng)改變。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

VUE是基于MVVM的設(shè)計(jì)模式開(kāi)發(fā)的，今天說(shuō)一下MVC和MVVM的區(qū)別。

MVC：

m:model數(shù)據(jù)模型層   v:view視圖層  c:controller控制器

原理：c層需要控制model層的數(shù)據(jù)在view層進(jìn)行顯示

MVC兩種方式，圖片說(shuō)明：

代碼實(shí)例：

我們做一個(gè)很簡(jiǎn)單的p顯示隱藏的效果，點(diǎn)擊toggle可以切換下面p顯示隱藏

html:

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

JS:

下面是我們不用設(shè)計(jì)模式寫(xiě)的JS，這種寫(xiě)法不利于維護(hù)，純粹的面向過(guò)程去寫(xiě)代碼：

        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的寫(xiě)法：

         //view
        let boxDom = document.getElementsByClassName("box")[0];
        //model
        let model = {
            isShow:true,
            isBig:false
        }
 
        //controller 業(yè)務(wù)邏輯
        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(){//數(shù)據(jù)驅(qū)動(dòng)視圖的更改
                boxDom.style.display = model.isShow?"block":"none";
                boxDom.style.width = model.isBig?"300px":"100px";
            }
        }
 
        new Controller();//初始化一下

雖然MVC代碼比較長(zhǎng)，不過(guò)以后用起來(lái)很方便，只要是相同的效果拿過(guò)來(lái)用就行

下面說(shuō)一下MVVM

MVVM：

m:model數(shù)據(jù)模型層   v:view視圖層  vm:ViewModel

vue中采用的是mvvm模式，這是從mvc衍生過(guò)來(lái)的

MVVM讓視圖與viewmodel直接的關(guān)系特別的緊密，就是為了解決mvc反饋不及時(shí)的問(wèn)題

圖片說(shuō)明一下：

說(shuō)到MVVM就要說(shuō)一下雙向綁定和數(shù)據(jù)劫持的原理，

1、雙向綁定的原理是什么？

（當(dāng)視圖改變的時(shí)候更新模型層，當(dāng)模型層改變的時(shí)候更新視圖層）

vue中采用了數(shù)據(jù)劫持&訂閱發(fā)布模式：

vue在創(chuàng)建vm的時(shí)候，會(huì)將數(shù)據(jù)配置在實(shí)例當(dāng)中，然后會(huì)使用Object.defineProperty對(duì)這些數(shù)據(jù)進(jìn)行處理，為這些數(shù)據(jù)添加getter與setter方法。當(dāng)獲取數(shù)據(jù)的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng)的getter方法，當(dāng)設(shè)置數(shù)據(jù)的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng)的setter方法，從而進(jìn)一步觸發(fā)vm上的watcher方法，然后數(shù)據(jù)了，vm進(jìn)一步去更新視圖。

2、 數(shù)據(jù)劫持：

vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter。在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽(tīng)回調(diào)。

Object.defineProperty代碼實(shí)例：

//Object.defineProperty  因?yàn)槭褂昧薊S5的很多特性 
        let _data = {}
        let middle = 111;
        Object.defineProperty(_data,"msg",{
            get(){
                return middle;
            },
            set(val){
               middle = val;
            }
        });
 
        console.log(_data.msg);//獲取數(shù)據(jù)的時(shí)候，會(huì)調(diào)用對(duì)應(yīng)對(duì)象屬性的getter方法
        _data.msg = 222;//設(shè)置數(shù)據(jù)的時(shí)候，會(huì)調(diào)用對(duì)應(yīng)對(duì)象屬性的setter方法
        console.log(_data.msg);

總結(jié)：

mvvm與mvc最大的區(qū)別：

MVVM實(shí)現(xiàn)了view與model的自動(dòng)同步，也就是model屬性改變的時(shí)候， 我們不需要再自己手動(dòng)操作dom元素去改變view的顯示，而是改變屬性后該屬性對(duì)應(yīng)的view層會(huì)自動(dòng)改變。

感謝各位的閱讀，以上就是“vue中mvvm和mvc的區(qū)別有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue中mvvm和mvc的區(qū)別有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！