MVC、MVVM和單向數據流的對比

前端開發本質上是一種展示層開發，我思考了一下這句話，這句話用人話說就是前端開發自己就是寫界面的。可是別人能把寫界面的能總結成下面一個循環，我發現這真的是能力了。以下圖，有略微的改動：

下面就開始進入正題了。

基於MVC的前端開發
簡單的MVC
先看下圖：

1. 用戶操做界面
2. 當用戶操做的視圖的時候會派發一個事件給Action
3. 當Action接受到這個事件的時候，調用Model對應的方法

演進的前端MVC

1. 用戶操做界面
2. 當用戶操做的視圖的時候會派發一個事件給Action
3. 當Action接受到這個事件的時候，調用Model對應的方法
4. Model得知view改變了，而後進行相應的操做，改變自身所存儲的數據
5. 當Model改變了，派發一個事件給Action

進一步複雜的前端MVC

1. 用戶操做界面
2. 當用戶操做的視圖的時候會派發一個事件給Action
3. 當Action接受到這個事件的時候，調用Model對應的方法
4. Model得知view改變了，而後進行相應的操做，改變自身所存儲的數據
5. 當Model改變了，派發一個事件給Action
6. 當Action知道Model的數據變化的時候，調用views中的方法
7. view改變自身

可是這樣是有下面兩個問題的，

• 交互增長致使view的控制代碼迅速膨脹，最終致使代碼不可維護
• Model的控制代碼也會變多，

以致於出現下面的情況：

前端的MVVM
雖然mvc有以上的弊端，可是由於沒有一個好的架構思想去取代他，因此也只能用MVC了，可是隨着前端angular的橫空出世，倡導的MVVM思想也隨之深刻人心，先看下圖：

1. view和viewModel的數據雙向綁定
2. 當用戶操做view的時候，viewmodel也進行對象對應的變化

這樣，咱們能經過操做Model來控制view的顯示，一個頁面的好比能拆分爲小功能(註冊/登錄、表單提交、XXX功能)這樣每一個功能對應一個Model，咱們就能模塊化的管理Model，就變爲了下圖：

因此當用戶操做界面的時候，咱們viewModel就知道是哪部分發生了變化，對應的viewModel就進行改變。

React一種新的思想
瞭解React的都知道，React對強大的功能就是vdom，可以計算出最有效也是花費最小的vdom和真實dom的差別並進行改變。

下圖爲MVVM的總體設計思路：

用戶操做view
dispatch view事件給狀態管理
狀態管理工具更新狀態/進行到下一個狀態
根據新的狀態，render view
React聽從的是單向的數據流：

• 存在一個Model到React的映射關係，即view的渲染方法
• view並不知道本身對應Modle哪一塊
• 因而每次Model的變動，view所有更新。React的vdom算法保證了render的高效

MVVM和React
要解決的問題： 複雜的web交互致使view更新邏輯的爆炸

解決思路：

• MVVM：記錄Model、雙向綁定，Model變動時更新view對應部分
• React：實現view高效更新算法，Model變動時更新整個view

MVVM的實現是在工程上進行解決，React在解決思路(算法)上進行解決

版權聲明：本文爲博主原創文章，轉載請註明出處 https://blog.csdn.net/woshina...