MVC、MVP及MVVM之間的關系
介紹
寫這篇隨筆完全是為了加深自己的印象，畢竟寫比看能獲得得更多，另外本人對這三種模式的認識還是淺薄的，有待在以後的工作學習中有更深入的理解，因此不免會有誤解，這裏推薦大家閱讀廖雪峰關於MVVM的介紹，以及阮一峰的MVC，MVP 和 MVVM的圖示及談談MVC模式，相信您會有更深刻的理解。
概要
MVC、MVP及MVVM都是一種架構模式，為了解決圖形界面應用程序復雜性管理問題而產生的應用架構模式。
發展歷程
MVC模式概要
1.即Model、View、Controller即模型、視圖、控制器。
- View：它是提供給用戶的操作界面，是程序的外殼；
- Model：是程序需要操作的數據和信息；
- Controller：接收View層傳遞過來的指令，選取Model層對應的數據，進行相應操作。
2.舉一個現實中的類似的例子，MVC如同一家商鋪的運作模式，View層相當於是這家商鋪的店面，Model層相當於這家商鋪的倉庫，Controller層相當於是這家商鋪的執行部門。
3.MVC有如下兩種模式，不管哪種模式，MVC的通信都是單向的，由圖也可以看出，View層會從Model層拿數據，因此MVC中的View層和Model層還是存在耦合的。
MVP模式概要
1.MVP是從MVC進化而來，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是將MVC中的Controller變成了Presenter；
2.由上面對MVC的介紹中我們可以得知，MVC中的View層和Model層是存在耦合的，但其實我們不提倡View層與Model層有直接的交互；MVP就是這樣一種思想的體現，View層與Model的交互只能通過Presenter；
3.MVP與MVC還有一點不同是，它的通信是雙向的，如下圖所示，有兩個方向：V—>P—>M，M—>P—>V
MVVM模式概要
1.MVVM是由MVP進化而來，MVVM模式基本上與MVP相同，只是把MVP中的P變成了VM，即ViewModel，
2.MVVM中的數據可以實現雙向綁定，即View層數據變化則ViewModel中的數據也隨之變化，反之ViewModel中的數據變化，則View層數據也隨之變化
3.這裏以前端框架VUE舉例說明MVVM，當然還有許多有名的框架都用的是MVVM模式；MVVM的好處就是數據驅動，數據變，則頁面變，這樣就能用簡單的代碼，實現比較復雜的邏輯操作；因此MVVM框架比較適合邏輯復雜的前端項目，比如一些管理系統等。
1）準備視圖層
<p>Hello, {{ name }}!</p> --View層 --VUE中的單向綁定
<input v-model="name"> --View層 --VUE中的雙向綁定
2）準備數據層
data: { name: ‘‘ --Model層 }
3）至於VM層，VUE框架已封裝好，預知詳情可閱讀廖雪峰的博客；
4）得益於MVVM框架，我們此時想改變視圖層的<p>標簽和<input>標簽中的name屬性的值，只需要通過如下方式即可，這樣頁面中就會顯示“Jack”的名字，如果不是MVVM框架，我們則需要通過document.getElementById(‘name‘).innerHTML = ‘jack‘，這種操作dom節點的方式來改變頁面的值。
this.name = ‘jack‘
說明：本文為原創作品，若有參考會在文中提及，如有遺漏，涉及侵權，請聯系本人，將立即修正。
MVC、MVP及MVVM之間的關系