理解MVVM在react、vue中的使用

理解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中的對應關係