摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會完全的消失。層將通過特定的展示出來，并在控件上綁定視圖交互事件，一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數(shù)據(jù)驅(qū)動型的框架及是雙向數(shù)據(jù)綁定是單向數(shù)據(jù)綁定。

1） MVVM典型特點(diǎn)是有四個(gè)概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁定
2） 綁定器：聲明性的數(shù)據(jù)和命令，存在于ViewModel之中，讓ViewModel和Model二者進(jìn)行自動或手動通信，接下來的“MVVM在React中對應(yīng)關(guān)系”小節(jié)有舉例說明。
3） MVVM本質(zhì)上是M- V-C-VM，它是在MVC的基礎(chǔ)上增加了一層VM，只不過C變?nèi)趿?，被并入到M概念中，VM用于分離V和M，并且讓用戶避免由于直接操作V層的DOM而帶來的繁瑣和效率低下，MVVM使開發(fā)更高效，結(jié)構(gòu)更清晰，增加代碼的復(fù)用性。
4） 在不同的GUI（圖形用戶界面）上進(jìn)行展示時(shí)，Model、Controller、View-Model能夠復(fù)用，只需把View層進(jìn)行替換。
5） 在不同類型的UI（用戶界面）上進(jìn)行展示時(shí)，Model、Controller能夠復(fù)用，只需把View-Model、View層進(jìn)行替換。比如：假設(shè)我們開發(fā)的是一款針對盲人的應(yīng)用，那么輸出設(shè)備或許我們需要考慮使用揚(yáng)聲器來代替顯示器，輸入設(shè)備使用麥克風(fēng)，這時(shí)我們只需將上述的View-Model替換為Audio-Model作為語音模型，將 V(iew)層替換為Audio層用于播放語音和接收語音輸入。
6） 個(gè)人認(rèn)為：在基于MVVM框架的項(xiàng)目中，不管是雙向數(shù)據(jù)綁定還是單向數(shù)據(jù)綁定，你在開發(fā)中實(shí)際要面對的都是ViewModel和M(odel)層之前的通信，因?yàn)閂(iew) 和ViewModel層之間的映射和通信都是由框架自動完成的，

1） M(odel)層：模型，定義數(shù)據(jù)結(jié)構(gòu)。
2） C(ontroller)層：實(shí)現(xiàn)業(yè)務(wù)邏輯，數(shù)據(jù)的增刪改查。在MVVM模式中一般把C層算在M層中，（只有在理想的雙向綁定模式下，Controller 才會完全的消失。這種理想狀態(tài)一般不存在）
3） ViewModel層：顧名思義是視圖View的模型、映射和顯示邏輯（如if for等，非業(yè)務(wù)邏輯），另外綁定器也在此層。ViewModel是基于視圖開發(fā)的一套模型，如果你的應(yīng)用是給盲人用的，那么也可以開發(fā)一套基于Audio的模型AudioModel。
4） V(iew)層：將ViewModel通過特定的GUI展示出來，并在GUI控件上綁定視圖交互事件，V(iew)一般由MVVM框架自動生成在瀏覽器中。

1） M(odel)：對應(yīng)組件的方法或生命周期函數(shù)中實(shí)現(xiàn)的業(yè)務(wù)邏輯和this.state中保存的本地?cái)?shù)據(jù)，如果React集成了redux +react-redux，那么組件中的業(yè)務(wù)邏輯和本地?cái)?shù)據(jù)可以完全被解耦出來多帶帶存放當(dāng)做M層，如業(yè)務(wù)邏輯放在Reducer和Action中。
2） V(iew)-M(odel)：對應(yīng)組件中的JSX，它實(shí)質(zhì)上是Virtual DOM的語法糖。React負(fù)責(zé)維護(hù) Virtual DOM以及對其進(jìn)行diff運(yùn)算，而React-dom 會把Virtual DOM渲染成瀏覽器中的真實(shí)DOM
3） View：對應(yīng)框架在瀏覽器中基于虛擬DOM生成的真實(shí)DOM（并不需要我們自己書寫）以及我們書寫的CSS
4）綁定器：對應(yīng)JSX中的命令以及綁定的數(shù)據(jù)，如className={ this.props.xxx }、{this.props.xxx}等等

1） 一般，只有UI表單控件才存在雙向數(shù)據(jù)綁定，非UI表單控件只有單向數(shù)據(jù)綁定。
2） 單向數(shù)據(jù)綁定是指：M的變化可以自動更新到ViewModel，但ViewModel的變化需要手動更新到M（通過給表單控件設(shè)置事件監(jiān)聽）
3） 雙向數(shù)據(jù)綁定是指念：M的變化可以自動更新到ViewModel，ViewModel的變化也可以自動更新到M
4） 雙向綁定 = 單向綁定 + UI事件監(jiān)聽。雙向和單向只不過是框架封裝程度上的差異，本質(zhì)上兩者是可以相互轉(zhuǎn)換的。
5） 優(yōu)缺點(diǎn)：在表單交互較多的情況下，單向數(shù)據(jù)綁定的優(yōu)點(diǎn)是數(shù)據(jù)更易于跟蹤管理和維護(hù)，缺點(diǎn)是代碼量較多比較啰嗦，雙向數(shù)據(jù)綁定的優(yōu)缺點(diǎn)和單向綁定正好相反。

1） 三大框架都是數(shù)據(jù)驅(qū)動型的框架
2） vue及angular是雙向數(shù)據(jù)綁定；react是單向數(shù)據(jù)綁定。React貌似使用的也是Object.defineProperty監(jiān)控?cái)?shù)據(jù)，只是沒有進(jìn)一步把表單控件的事件封裝進(jìn)v-model
3） Vuex、Redux都是單項(xiàng)數(shù)據(jù)綁定的，即M的變化可以自動更新到V，但V的變化必須手動觸發(fā)事件更新到M，這種單項(xiàng)數(shù)據(jù)綁定使數(shù)據(jù)更易于跟蹤管理和維護(hù)。
4） 未完待續(xù)……

1） Vue的雙向數(shù)據(jù)綁定是通過Object.defineProperty的get/set對M層數(shù)據(jù)進(jìn)行監(jiān)控，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，自動更新VM層綁定的數(shù)據(jù)，而當(dāng)用戶更改了VM層表單控件的數(shù)據(jù)時(shí)，通過v-model自動更新到M層（v-model是對表單控件的事件的封裝）
精簡示例：

2）我們已經(jīng)知道Vue是雙向數(shù)據(jù)綁定（通過v-model），Vuex是單向數(shù)據(jù)綁定，那么問題來了，在基于Vue+ Vuex的項(xiàng)目中，Vuex中的數(shù)據(jù)是不允許Vue的v-model對其進(jìn)行更改的，會報(bào)錯，有如下三種解決方案：

依然使用v-model，數(shù)據(jù)不放進(jìn)Vuex中，而是放在組件自身的data屬性中

依然使用v-model，不過取值不再是Vuex中的數(shù)據(jù)，而是組件自身的一個(gè)computed（getter/setter）或watch，通過computed或watch里的回調(diào)來把數(shù)據(jù)變化提交（commit）到Vuex
組件模板：

組件VUE實(shí)例：

computed: {
    newName: {
      get () {
        return this.$store.state.name
      },
      set (val) {
        this.$store.commit("changeName", val) //當(dāng)newName 值發(fā)生改變時(shí)，提交一個(gè)mutation：changeName，用于改變store中的name/
      }
    }
  }

mutation：

 changeName (state, val) {
   state.name = val
 }

不使用v-model，通過UI事件監(jiān)聽觸發(fā)一個(gè)回調(diào)，然后手動把數(shù)據(jù)變化提交（commit）到Vuex

3）Vue的雙向數(shù)據(jù)綁定和Vue的prop的單項(xiàng)數(shù)據(jù)流是兩個(gè)不同的概念，數(shù)據(jù)綁定的前提是有數(shù)據(jù)流，但有數(shù)據(jù)流不一定有數(shù)據(jù)綁定。prop的單項(xiàng)數(shù)據(jù)流是指：prop可以把父組件的數(shù)據(jù)傳遞給子組件并且子組件不能對該數(shù)據(jù)進(jìn)行直接修改更不能回流到父組件（當(dāng)然，得益于Vue對所有數(shù)據(jù)使用了Object.defineProperty，所以prop傳遞的數(shù)據(jù)是綁定的，即父組件中該數(shù)據(jù)一旦發(fā)生變化，子組件中的也跟著變化）