首先，在談這個話題之前， 我們有必要了解一下庫和框架的區別。

我們先來看react官網以及vue官網對他們的定位：

react:

vue:

react我們不說了，官網上明明白白說了，人家是一個library，用于構建用戶界面。

vue的官方文檔是說vue的核心庫也只是關注視圖（View）層。

所以，實際上來說，和angular有完整的解決方案不同，狹義的vue.js和react.js實際上只是library，還并不是一個framework，因為他們沒有一整套的解決方案。

換句話來說，現在我們所討論的vue、react，都是我們將他們武裝之后，他們有了一整套解決方案了。成為了一個框架，我們再來討論他們的架構模式。

下面兩層是不變的，先提前聲明：

Model（數據模型）: 原始數據模型的管理。

View（視圖）：用戶接觸操作的頁面。

MVC:

Controller（應用邏輯控制層）：將用戶的操作反饋給Model，通知其進行數據更新，業務邏輯的中心。

?

我們可以先暫時拋開框架，MVC的流程大概就是，html（View）操作，告知js（Controller）要更新數據（Model）啦，js（Controller）經過請求也好啥也好，更新了數據（Model），然后再告訴html(View)找指定的UI節點去更新數據。當然這里也可以直接由js（Controller）發起對數據（Model）的更新，流程差不多也是一樣的。

其實流程列出來我們就可以看到，這樣的架構模式在早期的web應用中可以適應的很好。因為早期的web應用，頁面的作用基本也就作為數據展示使用。Model層可以將數據處理好后通知View層渲染，就像jquery拿到ajax數據之后找到元素一頓innerHtml啥的。

但隨著web的發展，業務邏輯的復雜，可以發現這種架構模式以下兩個問題：

1、View更新的時候，必須要通過Controller去更新一遍Model；同樣的Model更新的時候，也要去更新一遍視圖。此時開發者是在同時維護View層和Model層。當頁面復雜的時候，開發者不得不做許多繁瑣的工作來保證數據的狀態、頁面的展示都是正確的。

2、View層與Model層耦合，復用性差。比方說，我點擊一個按鈕，更新了Model并將數據渲染為List；這是我再點擊一個按鈕，同樣更新這份數據但是渲染為Table。這個時候，由于之前邏輯已經連成一塊，我們不得不再寫一套渲染代碼。

3、同樣是由于View和Model耦合，數據流會十分混亂。比如改變了Model，這時View的更新又觸發了另一個Controller，使得另一個Model又更新了，這就會使數據流像意大利面條一樣纏在一起。

MVP：

誒這個時候我們想，好像這個Controller并沒有什么卵用啊，就傳遞一下信號就完事兒了。不行，活干的這么少，讓他再多干點！

如果我們能將數據返回給Controller，讓Controller來控制View的渲染，那么，View和Model不就釋放了嗎？于是，MVP模式誕生了，操作流如下圖所示：

不過此時的Controller層變成了Presenter（中介者）層，Presenter層既能將頁面操作告知Model進行數據更新，又能在數據更新時負責通知View進行更新視圖，使View層與Model層解耦。

針對上述問題2，在MVP架構模式下，Model層將數據返回給Presenter，再由Presenter決定我是渲染Table呢，還是渲染List。這種架構模式下，加強了Presenter的職能，這樣就解決了上述問題2、3。

但問題1依然存在啊！開發者依舊需要在Presenter中同時兼顧Dom和Data。

MVVM：

在此基礎上，如果說視圖層（View）與數據層（Model）是在某個環境下是綁定的，可以實現通過數據驅動視圖，那么，上述兩個問題，就都可以得到解決。于是MVVM誕生了，先看操作流：

在中間的ViewModel層中，會構建一份狀態數據，視圖層根據其渲染視圖。這樣， 開發者的精力被釋放，只要聚焦在業務邏輯中。所以，我的理解是，MVVM就是實現了數據綁定的MVP，注意，是綁定，而不是雙向綁定！！！（單向數據流和雙向數據流）。

----------------------------------------------------------------------------------------------

Vue

個人認為，這是毫無爭議的一個MVVM框架，對MVVM理念的貫徹也是最顯而易見的。

Model層：接口層，原始數據模型。

View層：視圖層，template中的html代碼。

ViewModel層：基于一個html元素構建的vue實例。將Model中的原始數據模型，構建成一份View層可以使用的視圖模型。這個時候，Model層、View層完全解耦。開發者已經完全不需要顧及View的展示更新了，只需要專注業務邏輯以及ViewModel層與Model的交互邏輯就ok。

AngularJs

Model層：接口層，原始數據模型。

View層：html頁面。

ViewModel層：基于ng-app構建的應用實例，與vue類似，數據雙向綁定機制不同。

React

Model層：接口層，原始數據模型。

View層：編譯之后的Dom。

ViewModel層：基于jsx語法，以及react構建的VDom，單向數據流。

這么一看，vue、react、angularJS不就都是MVVM框架嗎？唯一的區別就是，VM層中的Model與View，vue與angular是數據雙向綁定，而react由于是單向數據流，所以需要手動更改狀態。

-----------------------------------------------------------------------------------------------

最后說下感受吧，其實之前一直以為自己是對這三種架構模式心里有底，但現在越看越繞，感覺歸根結底就是，在結合現有框架進行分析的時候，對model 層與 中間層（c，p或vm）的邊界界定十分模糊，沒有一個清晰的劃分。但是，現在想來也沒必要這么鉆牛角尖，其實吧，每一層專注于每一層的任務，這即是核心。在此基礎上的擴展以及如何對代碼進行組織管理，是看需求來界定的，這也是框架架構模式不斷發展的原因。

最后的最后：由于只是用過這三個框，個人理解肯定存在局限性和不足的地方，希望各位大佬指正！！！！

參考（看了很多，感覺就這三篇算是干貨比較多的）：

前端框架模式的變遷

一篇文章了解架構模式：MVC/MVP/MVVM

MVC，MVP 和 MVVM 的圖示

總結

以上是生活随笔為你收集整理的结合vue、react、angular谈谈MVC、MVP、MVVM框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。