：首先介紹下老生常談的設計模式變革，引出觀察者模式，簡單剖析下vm，最後表述下react與vue架構幾個相關注意點。
em...，本才疏學淺，多集天下之大成，如有誤，切指出。
MVC => MVP => MVVM
讀過很多文章之後，覺得這些設計模式是在經曆過簡單到複雜工程實踐後，為了解決突增的工作量，增加可維護性，通過分離關注點來改進代碼的組織方式，使得各個角色功能更明确，進一步降低互相之間的耦合。
MVC架構模式屬于程式設計的方法論，MVC模式是架構模式的一種：
- M: Model(模型) 資料層，程式需要操作的資料或資訊
- V: View(視圖) 使用者界面
- C: Controller(控制) 業務邏輯層，根據視圖層輸入的指令，進行相應操作
其廣泛地應用在前端和後端，針對前端和後端，這些定義囊括的範疇不盡相同。
前端MVC & 後端MVC
針對後端: V: 模版，C: 請求+路由，M: service+dao
針對前端：V: html + css ，C: js， M: ajax
可見，前後端的mvc無直接關系，本質均依據設計子產品定義，作出的分離規範。前端的mvc是融合代碼時期，後端mvc裡v分離出來的mvc，主要是為了解決複雜js子產品化的問題。
傳統的mvc模型把視圖渲染和資料處理做了隔離，通過控制器接收view的操作，傳遞給資料模型，資料模型處理之後驅動渲染視圖。
mvc
代碼事例
/**
上例中，盡量使資料處理與UI隔離，controller作為view和model溝通的橋梁，即controller與view的實作存在耦合，view的更新依賴model，即view和model的實作也存在耦合。
mvc同時也存在很多變種，大緻上都是對dom的操作代價很高，并且分工開發的程度較低。
MVP
mv* 的差別在于“M與V聯系”的部分，為進一步解決mvc中m或c和v之間的強耦合，提出改良版的mvc即mvp，對關注點的分離有了部分變化：M: 無關業務的資料處理，V: 視圖，定義接口，P：響應視圖指令，調用M資料進行業務處理，并将處理結果回報至視圖，驅動視圖渲染。
mvp
代碼事例
/**
mvp中改變了通信方向，完全隔離了v和m，通過定義v接口降低p和v的耦合度。同時，v非常薄，不部署任何業務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 p非常厚，所有邏輯都部署在那裡。
MVVMmvvm(m-v-vm)模式将p改為vm，v不再提供接口，基本與mvp模式完全一緻，唯一差別在于vm對v與m做了自動關聯，即雙向綁定。
mvvm
代碼事例
/**
觀察者模式
觀察者模式又叫釋出訂閱模式或消息機制，定義了一種依賴關系，解決了主體對象與觀察者之間功能的耦合。
觀察者模式
簡單舉例：地方中轉站需要接收來此地方中轉的飛機的位置資訊，飛機會将自己的位置資訊發送給衛星，衛星收到資訊後将對應飛機的位置資訊發送給訂閱該飛機的中轉站，如果飛機已經飛過了地方中轉站，地方中轉站将不再接收該飛機的位置資訊。
由此可見，觀察者需要一個消息容器（針對訂閱的飛機的不同，分成不同的隊列），以及三個方法：訂閱消息方法，取消訂閱的消息方法，發送訂閱的消息方法。
代碼事例
var
圖事例
class
搭建vm
vm的功能是能夠實作v和m之間的雙向綁定，雙向綁定展現在form表單，以簡易vue中的input(v-model = "ipt")舉例，v中input關聯m中ipt，輸入input之後，m即更改ipt的值，屬于v->m的更新，實作需要事件監聽，m直接更改ipt，對應更改input的值，屬于m->v的更新，實作需要對象屬性的攔截（Object.defineProperty(obj, prop, descriptor)），其餘綁定如{{}}，為單向綁定。這裡我們可以把vm看作衛星，m中的data裡的屬性看作飛機，{{}}等看作中轉站，隻是飛機發送消息依靠的是v中的一些操作。
vm原理
代碼事例-v
<!DOCTYPE html>
代碼事例-vm_observer.js
/**
代碼事例-vm_watcher.js
/**
代碼事例-vm_compile.js
/**
代碼事例-vm_index.js
class
react與vue的差別
vue無疑是mvvm架構，那react呢？MVVM的一個顯著特征是雙向綁定，React沒有這個，它是狀态驅動視圖（setState=>view），内部的狀态内部自己控制，這樣的設計，從使用上變得更确定清晰，除此之外類MVVM，也有人說mobx結合React便是繁雜版的vue。
react與vue的資料為自頂而下的單向資料流，通過props傳遞給子元件，父級prop的更新會向下流動到子元件，但反過來不行；react單向資料綁定，資料和視圖之間單向綁定，資料 --> 視圖, vue雙向資料綁定，資料和視圖之間雙向綁定，資料 <--> 視圖，這樣的差異性展現在表單控件的使用上，雙向綁定的是單向綁定加事件監聽的文法糖，實質是通過監聽使用者的輸入事件以更新資料的，單向綁定需要手動收集頁面的變化，更新資料。
連結：
MVC，MVP 和 MVVM 的圖示www.ruanyifeng.com
MVC、MVP、MVVM · 語雀www.yuque.com
一篇文章了解架構模式：MVC/MVP/MVVM - 湯姆C - SegmentFault 思否segmentfault.com
tt月下門：結合vue、react、angular談談MVC、MVP、MVVM架構zhuanlan.zhihu.com
西嶺老濕：從項目工程化的角度，談一下 MVC 與 MVVMzhuanlan.zhihu.com
Mvuegithub.com