1） m(odel)層：模型，定義資料結構。
2） c(ontroller)層：實現業務邏輯，資料的增刪改查。在mvvm模式中一般把c層算在m層中，（只有在理想的雙向繫結模式下，controller 才會完全的消失。這種理想狀態一般不存在）
3） viewmodel層：顧名思義是檢視view的模型、對映和顯示邏輯（如if for等，非業務邏輯），另外繫結器也在此層。viewmodel是基於檢視開發的一套模型，如果你的應用是給盲人用的，那麼也可以開發一套基於audio的模型audiomodel。
4） v(iew)層：將viewmodel通過特定的gui展示出來，並在gui控制項上繫結檢視互動事件，v(iew)一般由mvvm框架自動生成在瀏覽器中。
1） m(odel)：對應元件的方法或生命週期函式中實現的業務邏輯和this.state中儲存的本地資料，如果react整合了redux +react-redux，那麼元件中的業務邏輯和本地資料可以完全被解耦出來單獨存放當做m層，如業務邏輯放在reducer和action中。
2） v(iew)-m(odel)：對應元件中的jsx，它實質上是virtual dom的語法糖。react負責維護 virtual dom以及對其進行diff運算，而react-dom 會把virtual dom渲染成瀏覽器中的真實dom
3） view：對應框架在瀏覽器中基於虛擬dom生成的真實dom（並不需要我們自己書寫）以及我們書寫的css
4）繫結器：對應jsx中的命令以及繫結的資料，如classname=、等等
1） 一般，只有ui表單控制項才存在雙向資料繫結，非ui表單控制項只有單向資料繫結。
2） 單向資料繫結是指：m的變化可以自動更新到viewmodel，但viewmodel的變化需要手動更新到m（通過給表單控制項設定事件監聽）
3） 雙向資料繫結是指念：m的變化可以自動更新到viewmodel，viewmodel的變化也可以自動更新到m
4） 雙向繫結 = 單向繫結 + ui事件監聽。雙向和單向只不過是框架封裝程度上的差異，本質上兩者是可以相互轉換的。
5） 優缺點：在表單互動較多的情況下，單向資料繫結的優點是資料更易於跟蹤管理和維護，缺點是**量較多比較囉嗦，雙向資料繫結的優缺點和單向繫結正好相反。
1） 三大框架都是資料驅動型的框架
2） vue及angular是雙向資料繫結；react是單向資料繫結。react貌似使用的也是object.defineproperty監控資料，只是沒有進一步把表單控制項的事件封裝進v-model
3） vuex、redux都是單項資料繫結的，即m的變化可以自動更新到v，但v的變化必須手動觸發事件更新到m，這種單項資料繫結使資料更易於跟蹤管理和維護。
4） 未完待續……
1） vue的雙向資料繫結是通過object.defineproperty的get/set對m層資料進行監控，當資料發生變化時，自動更新vm層繫結的資料，而當使用者更改了vm層表單控制項的資料時，通過v-model自動更新到m層（v-model是對表單控制項的事件的封裝）
精簡示例：
3）vue的雙向資料繫結和vue的prop的單項資料流是兩個不同的概念，資料繫結的前提是有資料流，但有資料流不一定有資料繫結。prop的單項資料流是指：prop可以把父元件的資料傳遞給子元件並且子元件不能對該資料進行直接修改更不能回流到父元件（當然，得益於vue對所有資料使用了object.defineproperty，所以prop傳遞的資料是繫結的，即父元件中該資料一旦發生變化，子元件中的也跟著變化）
posted @
2018-12-16 13:12
棲息地 閱讀(
...)
編輯收藏
前端MVVM模式及其在Vue和React中的體現
1 m odel 層 模型，定義資料結構。2 c ontroller 層 實現業務邏輯，資料的增刪改查。在mvvm模式中一般把c層算在m層中，只有在理想的雙向繫結模式下，controller 才會完全的消失。這種理想狀態一般不存在 3 viewmodel層 顧名思義是檢視view的模型 對映和顯示邏...
前端MVVM模式及其在Vue和React中的體現
1 m odel 層 模型，定義資料結構。2 c ontroller 層 實現業務邏輯，資料的增刪改查。在mvvm模式中一般把c層算在m層中，只有在理想的雙向繫結模式下，controller 才會完全的消失。這種理想狀態一般不存在 3 viewmodel層 顧名思義是檢視view的模型 對映和顯示邏...
理解 Vue 的 MVVM 模式
vue 實 現方式使用資料劫持 發布訂閱模式，其核心為 object.defineproperty 不相容ie8以下 angualr 使用髒值檢測 這次主要介紹vue如何通過 object.defineproperty 實現mvvm object.defineproperty obj,propert...