MVVM解析

閑來無事看到了一個關於Vue的MVVM的簡單講解，覺得寫得不錯，做個分享。

文章地址

https://github.com/DMQ/mvvm

文章內容我就不貼出，比較簡潔明瞭，我記錄一下我的一些思考總結。

PS：建議先仔細讀這篇文章。

MVVM

MVVM即雙向數據綁定，是一種設計模式，一般是Web前端框架的核心概念，肯定也不是Vue只此一家有。

簡單來說就是，數據跟視圖的實時綁定。如果我們自己要實現這個需求，那核心的問題有三個：

1、如何監聽到數據變化？

2、數據變化如何通知到視圖？

3、視圖如何更新？

這三個問題先放著，後面大家就知道我為什麼這麼劃分這三個問題。

討論文章

實現數據綁定的做法有大致如下幾種： 1、發佈者-訂閱者模式（backbone.js） 2、臟值檢查（angular.js） 3、數據劫持（vue.js）

那文章中把實現數據綁定歸類為這幾種，不過我覺得他的說法有問題。

首先，發佈訂閱模式是一種消息通知的設計模式，它解決的是通知的問題，也就是我上面提到的第2個問題。

然後，無論是臟值檢查還是數據劫持，它解決的是監聽數據變化的問題，也即是上面第1個問題。

也就是說，實現數據綁定，做法是 2 或 3 + 1，而不是選擇其中一個就可以的。

另外，這三個方式並沒有視圖更新的部分，不能算是一個完整的數據綁定過程。

PS：這一點上大家要明確。

如何監聽到數據變化？

angular.js：臟值檢查。

vue.js：數據劫持。

angular.js我已許久不用，就不多討論，這裡談談vue.js。

不得不說，vue.js是做得比較雞賊的，它利用js的語言特性，即Object.defineProperty()方法，做到了監聽數據變化，但也因此它只能相容IE9以上瀏覽器。

框架所使用的語言特性，直接影響它的相容性。

數據變化如何通知到視圖？

如果對設計模式比較瞭解，一看到這個需求，很自然而然地就想起訂閱發佈模式。

關於訂閱發佈模式，可查看：https://www.cnblogs.com/lovesong/p/5272752.html

視圖如何更新？

在看那文章中，我最感興趣的是這個，有些豁然開朗。

在我看來，視圖更新數據無非是在元素節點的屬性或內容上，那麼只需要設置一些特殊的指令作識別，再將相應的數據更新到元素上即可。

這樣這一步需要做兩件事：

1、指令解析器。解析指令，例如指令類型、對應表達式或數據項。

2、訂閱事件。根據數據項生成訂閱者。

做到這兩步，再加上前面所做，就完成了MV的綁定。這個過程中，數據的維護方是觀察者，而指令解析器是訂閱者。

可能大家沒有意識到的是，如果要完成VM的綁定，那麼指令解析器是觀察者，而數據的維護方是訂閱者。例如一個表單的input，指令解析器解析出v-model時，它就需要監聽input的change事件，當數值變化時，它需要通知數據維護方更新數據。

所以，在完整的MVVM中，數據維護方和指令解析器即是觀察者，也是訂閱者。

總結

MVVM，無論細節是如何實現，其關鍵部分就在於訂閱發佈這種思想，把握好這個，理解就不難了。