淺析MVC、MVP、MVVM 三種開發模式以及Vue雙向數據綁定原理

MVC

M：model V：view C：controller

MVC 是不改變試圖的狀況下改變試圖對用戶輸入的相應方式

Model 層用於封裝和應用程序的業務邏輯相關的數據以及對數據的處理方法
View 做爲視圖層，主要負責數據的展現
Controller 讓它來定義用戶界面對用戶輸入的響應方式，它鏈接模型和視圖，用於控制應用程序的流程，處理用戶的行爲和數據上的改變

用戶對V的操做交給了C處理，在C中相應V的事件調用M的接口對數據進行操做
一旦M發生變化便通知相關試圖進行更新!

MVP

MVP中的V不直接使用M，而是經過爲P提供接口，讓P去更新M，再經過觀察者模式更新V。
M => Model管理數據 V => View負責顯示 P => Presenter 負責業務邏輯 
與MVC相比，MVP模式經過解耦View和Model，徹底分離視圖和模型使職責劃分更加清晰；
因爲View不依賴Model，能夠將View抽離出來作成組件，它只須要提供一系列接口提供給上層操做

MVVM

MVVM（Model-View-ViewModel）最先由微軟提出。
ViewModel指 "Model of View"——視圖的模型

在MVVM中，咱們能夠把Model稱爲數據層，由於它僅僅關注數據自己，不關心任何行爲,
格式化數據由View的負責
VM實現數據雙向綁定
當Model發生變化，ViewModel就會自動更新；ViewModel變化，Model也會更新。

雙向數據綁定原理——Vue

Vue 採用 數據劫持 和 發佈-訂閱模式的方式，
經過ES5提供的Object.defineProperty()方法來劫持(由於ie8如下不支持該方法，因此vue不兼容ie8)
各屬性的getter、setter，並在數據（對象）發生變更時通知訂閱者，出發相應的監聽回調。
因爲，是在不一樣數據上出發同步，能夠精確的將變動發送給綁定的試圖，而不是對全部的數據都執行一次檢測，
要實現Vue中的雙向數據綁定，大體能夠劃分三個模塊：Observer、Compile、Watcher
Observer 數據監聽器
負責對數據對象的全部屬性進行監聽（數據劫持），監聽到數據發生變化後通知訂閱者。

Compiler 指令解析器
掃描模板，並對指令進行解析，而後綁定指定事件。

Watcher 訂閱者
關聯Observer和Compile，可以訂閱並收到屬性變更的通知，執行指令綁定的相應操做，更新視圖。Update()是它自身的一個方法，用於執行Compile中綁定的回調，更新視圖。