資訊專欄INFORMATION COLUMN
摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會完全的消失。層將通過特定的展示出來，并在控件上綁定視圖交互事件，一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數據驅動型的框架及是雙向數據綁定是單向數據綁定。
MVVM相關概念
1） MVVM典型特點是有四個概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁定
2） 綁定器：聲明性的數據和命令，存在于ViewModel之中，讓ViewModel和Model二者進行自動或手動通信，接下來的“MVVM在React中對應關系”小節有舉例說明。
3） MVVM本質上是M- V-C-VM，它是在MVC的基礎上增加了一層VM，只不過C變弱了，被并入到M概念中，VM用于分離V和M，并且讓用戶避免由于直接操作V層的DOM而帶來的繁瑣和效率低下，MVVM使開發更高效，結構更清晰，增加代碼的復用性。
4） 在不同的GUI（圖形用戶界面）上進行展示時，Model、Controller、View-Model能夠復用，只需把View層進行替換。
5） 在不同類型的UI（用戶界面）上進行展示時，Model、Controller能夠復用，只需把View-Model、View層進行替換。比如：假設我們開發的是一款針對盲人的應用，那么輸出設備或許我們需要考慮使用揚聲器來代替顯示器，輸入設備使用麥克風，這時我們只需將上述的View-Model替換為Audio-Model作為語音模型，將 V(iew)層替換為Audio層用于播放語音和接收語音輸入。
6） 個人認為：在基于MVVM框架的項目中，不管是雙向數據綁定還是單向數據綁定，你在開發中實際要面對的都是ViewModel和M(odel)層之前的通信，因為V(iew) 和ViewModel層之間的映射和通信都是由框架自動完成的，
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={ this.props.xxx }、{this.props.xxx}等等
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是對表單控件的事件的封裝）
精簡示例：
2）我們已經知道Vue是雙向數據綁定（通過v-model），Vuex是單向數據綁定，那么問題來了，在基于Vue+ Vuex的項目中，Vuex中的數據是不允許Vue的v-model對其進行更改的，會報錯，有如下三種解決方案：
依然使用v-model，數據不放進Vuex中，而是放在組件自身的data屬性中
依然使用v-model，不過取值不再是Vuex中的數據，而是組件自身的一個computed（getter/setter）或watch，通過computed或watch里的回調來把數據變化提交（commit）到Vuex
組件模板：
{{newName}}
組件VUE實例：
computed: {
newName: {
get () {
return this.$store.state.name
},
set (val) {
this.$store.commit("changeName", val) //當newName 值發生改變時，提交一個mutation：changeName，用于改變store中的name/
}
}
}
mutation：
changeName (state, val) {
state.name = val
}
不使用v-model，通過UI事件監聽觸發一個回調，然后手動把數據變化提交（commit）到Vuex
3）Vue的雙向數據綁定和Vue的prop的單項數據流是兩個不同的概念，數據綁定的前提是有數據流，但有數據流不一定有數據綁定。prop的單項數據流是指：prop可以把父組件的數據傳遞給子組件并且子組件不能對該數據進行直接修改更不能回流到父組件（當然，得益于Vue對所有數據使用了Object.defineProperty，所以prop傳遞的數據是綁定的，即父組件中該數據一旦發生變化，子組件中的也跟著變化）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98810.html
摘要：小白一枚，一直使用的是，想要多了解一些其它的框架，正好最近越來越火熱，上的數已經超過了?？蚣芾斫庹f起這個模型，就不得不說框架。函數表示創建一個文本節點，函數表示創建一個數組。 小白一枚，一直使用的是React，想要多了解一些其它的框架，正好最近Vue越來越火熱，Github上的Star數已經超過了React。而其背后蘊含的MVVM框架思想也一直跟React的組件化開發思想并駕齊驅，在這...
摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。 本文是 前端練級攻略 第二部分，第一部分請看下面： 前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...
閱讀 994·2023-04-25 14:41
閱讀 2445·2021-09-28 09:35
閱讀 3619·2019-08-30 15:53
閱讀 1941·2019-08-29 15:26
閱讀 1060·2019-08-28 17:59
閱讀 4229·2019-08-26 13:45
閱讀 2835·2019-08-26 13:33
閱讀 1639·2019-08-26 11:46
