理解MVVM在react、vue中的使用
一：什么是MVC、為什么不用MVC
1：MVC的含義：
- M（modal）：是應用程序中處理數據邏輯的部分。
- V （view） ：是應用程序中數據顯示的部分。
- C（controller）：是應用程序中處理用戶交互的地方（
Controller是MVC中的數據和視圖的協調者，也就是在Controller里面把Model的數據賦值給View來顯示（或者是View接收用戶輸入的數據然后由Controller把這些數據傳給Model來保存到本地或者上傳到服務器））
M-V-C之間的關系可以用下面這張圖直觀展示
2： 傳統的web開發時如何實現MVC模式的
如果前端沒有框架，只使用原生的html+js，MVC模式可以這樣理解。將html看成view;js看成controller，負責處理用戶與應用的交互，響應對view的操作（對事件的監聽），調用Model對數據進行操作，完成model與view的同步（根據model的改變，通過選擇器對view進行操作）;將js的ajax當做Model，也就是數據層，通過ajax從服務器獲取數據（按照上面這種方式分層，感覺多少有點強行MVC，因為Model層被弱化了）。
3：MVC模式有什么缺點
- 對 DOM 操作的代價非常高
- 程序運行緩慢且效率低下
- 內存浪費嚴重
- 應用程序復雜性高，難以分工開發。
二：什么是MVVM，MVVM的優點
1:什么是MVVM：
- M（modal）：模型，定義數據結構。
- C（controller）：實現業務邏輯，數據的增刪改查。在MVVM模式中一般把C層算在M層中，（只有在理想的雙向綁定模式下，Controller 才會完全的消失。這種理想狀態一般不存在）。
- VM（viewModal）：視圖View的模型、映射和顯示邏輯（如if for等，非業務邏輯），另外綁定器也在此層。ViewModel是基於視圖開發的一套模型，如果你的應用是給盲人用的，那么也可以開發一套基於Audio的模型AudioModel。
- V（view） ：將ViewModel通過特定的GUI展示出來，並在GUI控件上綁定視圖交互事件，V(iew)一般由MVVM框架自動生成在瀏覽器中。
·2：MVVM的優點：
MVVM比MVC精簡很多，不僅簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高代碼的可重用性
三：MVVM的雙綁和單綁區別：
- 一般只有UI表單控件才存在雙向數據綁定，非UI表單控件只有單向數據綁定。
- 單向數據綁定是指：M的變化可以自動更新到ViewModel，但ViewModel的變化需要手動更新到M（通過給表單控件設置事件監聽）
- 雙向數據綁定是指念：M的變化可以自動更新到ViewModel，ViewModel的變化也可以自動更新到M
- 雙向綁定 = 單向綁定 + UI事件監聽。雙向和單向只不過是框架封裝程度上的差異，本質上兩者是可以相互轉換的。
優缺點：在表單交互較多的情況下，單向數據綁定的優點是數據更易於跟蹤管理和維護，缺點是代碼量較多比較啰嗦，雙向數據綁定的優缺點和單向綁定正好相反。
四：MVVM模式在react和vue中的對應關系
1：MVVM模式在react中的對應關系
- M(odel)：對應組件的方法或生命周期函數中實現的業務邏輯和this.state中保存的本地數據，如果React集成了redux +react-redux，那么組件中的業務邏輯和本地數據可以完全被解耦出來單獨存放當做M層，如業務邏輯放在Reducer和Action中。
- V(iew)-M(odel)：對應組件中的JSX，它實質上是Virtual DOM的語法糖。React負責維護 Virtual DOM以及對其進行diff運算，而React-dom 會把Virtual DOM渲染成瀏覽器中的真實DOM
- View：對應框架在瀏覽器中基於虛擬DOM生成的真實DOM（並不需要我們自己書寫）以及我們書寫的CSS
- 綁定器：對應JSX中的命令以及綁定的數據，如className={ this.props.xxx }、{this.props.xxx}等等
2：MVVM模式在vue中的對應關系
