????想要真正搞清楚他們的區(qū)別只要清楚認(rèn)識(shí)最基礎(chǔ)的mvc模式就好理解了，我們?cè)谒阉鱩vc和mvvm的時(shí)候通常都是文字?jǐn)⑹龌蛘吒郊由夏Ｐ蛨D片，但是當(dāng)你讀完以后發(fā)現(xiàn)和其他搜素的敘述大差不差。

? ? 大多數(shù)文章的解釋都是m是Model模型用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫(kù)中存取數(shù)據(jù)，v是View處理數(shù)據(jù)顯示的部分，通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建，c是Controller控制器處理用戶交互的部分。通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。但是讀完以后，view好理解但是又想問(wèn)model模型、controlle到底是是什么，然后我們就開(kāi)始搜索看的也是似懂非懂。

????今天小顏就以我們最熟悉的方式告訴你們到底什么是mvc，一般想要搞清楚mvc的前端大佬都已經(jīng)有好幾年的工作經(jīng)驗(yàn)了，所以這篇文章就以平時(shí)我們寫的最簡(jiǎn)單的代碼里總結(jié)一下哪塊是model部分哪塊是control部分或者view。

假設(shè)領(lǐng)導(dǎo)讓我們寫一個(gè)簡(jiǎn)單的計(jì)數(shù)器應(yīng)用，用戶可以通過(guò)點(diǎn)擊按鈕來(lái)增加或減少數(shù)字。

1.1 Model（模型）

模型負(fù)責(zé)存儲(chǔ)和管理數(shù)據(jù)。在我們的計(jì)數(shù)器應(yīng)用程序中，模型將存儲(chǔ)當(dāng)前計(jì)數(shù)器的值。

// 模型

var model = {?

????count: 0 // 計(jì)數(shù)器初始值?

};?

// 提供方法來(lái)增加和減少計(jì)數(shù)器的值?

model.increment = function() {?

????this.count++;?

};?

model.decrement = function() {?

????if (this.count > 0) {?

????????this.count--;?

????}

?};

1.2 View（視圖）

視圖負(fù)責(zé)展示數(shù)據(jù)給用戶。在我們的計(jì)數(shù)器應(yīng)用程序中，視圖將顯示當(dāng)前計(jì)數(shù)器的值。

<!-- 視圖 -->?

<div id="counter-view">?

????<p>當(dāng)前計(jì)數(shù)：<span id="counter-value">0</span></p >?

????<button id="increment-button">增加</button>?

????<button id="decrement-button">減少</button>?

</div>?

<script>

?// 初始時(shí)設(shè)置視圖的值?

document.getElementById('counter-value').textContent = model.count;?

</script>

1.3 Controller（控制器）

控制器負(fù)責(zé)接收用戶的輸入，并調(diào)用模型和視圖來(lái)更新數(shù)據(jù)和界面。

// 控制器?

document.getElementById('increment-button').addEventListener('click', function() {?

????model.increment(); // 更新模型

????document.getElementById('counter-value').textContent = model.count; // 更新視圖

});?

document.getElementById('decrement-button').addEventListener('click', function() {?

????model.decrement(); // 更新模型?

????document.getElementById('counter-value').textContent = model.count; // 更新視圖?

});

????當(dāng)用戶點(diǎn)擊“增加”按鈕時(shí)，控制器捕獲到該事件并調(diào)用模型中的increment方法。模型中的count值增加后，控制器更新視圖中的計(jì)數(shù)器顯示。同理，當(dāng)用戶點(diǎn)擊“減少”按鈕時(shí)，控制器調(diào)用模型中的decrement方法，并更新視圖的顯示。

? ? 所以當(dāng)我們看完這個(gè)最簡(jiǎn)單的實(shí)例以后，就知道搜索的文章里所講的模型提供的方法是什么意思了。實(shí)例中模型提供方法來(lái)增加和減少計(jì)數(shù)器的值。視圖層不僅僅有包含標(biāo)簽部分，還有初始化設(shè)置實(shí)圖的值?？刂破鲗犹幚碛脩艚换サ牟糠?，控制器負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)就很好理解了，到這，想必你對(duì)mvc的理解更清晰了。

? ? 好了我們弄清楚了mvc其實(shí)就在我們每天寫的代碼里面，只不過(guò)我們沒(méi)有去區(qū)分model、view、control層而已，是不是很簡(jiǎn)單！接下來(lái)我們就要搞清楚mvvm模式了，我們搞懂了mvc就等于搞清楚一大半的mvvm了，因?yàn)閙vvm里面的mv和mvc里面的mv是一樣的。

? ? MVVM 與 MVC 最大的區(qū)別就是：它實(shí)現(xiàn)了 View 和 Model 的自動(dòng)同步，也就是當(dāng) Model 的屬性改變時(shí)，我們不用再自己手動(dòng)操作 Dom 元素，來(lái)改變 View 的顯示，而是改變屬性后該屬性對(duì)應(yīng) View 層顯示會(huì)自動(dòng)改變。這就是mv做的工作，相當(dāng)于mvc里面的控制器操作的部分全由vm層處理了，vm層當(dāng)然做的工作更多。

? ? 到這想必大家很清楚mvc和mvvm了，當(dāng)然這里面有個(gè)知識(shí)點(diǎn)vm到底怎么工作的，這個(gè)留著大家思考，后面小顏會(huì)給大家解釋的。但是到這為止已經(jīng)對(duì)兩種前段框架設(shè)計(jì)模式原理已經(jīng)很清楚了，不管對(duì)平時(shí)開(kāi)發(fā)時(shí)候的理解還是換工作面試時(shí)面試官問(wèn)你此類問(wèn)題都可以輕松應(yīng)對(duì)了。