vue輕量高效的前端元件化方案以及MVC MVVM思想

MayDo發表於2018-12-09

近些年來前端的發展的趨勢：

舊瀏覽器逐漸被淘汰，移動端需求增加，舊瀏覽器是指ie6-ie8是不支援es5的，而vuejs利用了Object.defineProperty特性，es5在移動端和pc端也都是支援的，所以vuejs可以在移動端和pc端充分發揮自己的長處，架構從傳統後臺MVC向REST api+前端MV*遷移。

MVC到REST api+前端MV*：

當前前端和後端發生一些資料互動的時候，會重新整理整個頁面，這樣的使用者體驗是非常差的，因此我們通過ajax的方式和後端REST API做通訊，非同步重新整理頁面的某個區塊來優化和提升體驗，同時把MV*拿到前端來做。

隨著前端這些需求的變化，其實會對前端產生一些新的需求，我們希望在前端有一個良好組織架構和對前端的程式碼量和開發和效率和可維護性都有了一定的要求，那麼vuejs就應用而生了

MV*是指MVC,MVP,MVVM等框架，vuejs是MVVM框架

model是指資料部分，對應到前端就是javascript物件。

view是檢視部分，對應到前端就是dom

viewmodel就是連結view和model的中間線，

在mvvm架構下，檢視和資料部分是不能直接通訊的，他通常通過viewmodel來做通訊，viewmodel要實現一個observer的角色，當資料發生變化，viewmodel能觀察到資料的變化，然後通知到對應的檢視做檢視更新，而當使用者操作檢視，viewmodel也能監聽到檢視的變化然後通知資料做改動，這實際上就實現了資料的雙向繫結

MVVM框架的應用場景並且他有什麼好處：

針對具有複雜互動邏輯的前端應用
提供基礎的架構抽象
通過ajax資料持久化，保證前端使用者體驗

它的好處：

前端對資料做一些互動的時候，可以通過ajax資料持久化，不需要重新整理整個頁面，只需要重新整理當前dom對應的那部分資料和內容，特別是移動端應用場景，重新整理頁面的代價太昂貴，會重新載入很多資源dom，css，js都會被瀏覽器重新解析一遍，因此，移動端頁面都會寫成SPA單頁應用。在這個基礎上，就誕生了許多mvvm框架：angularjs,reactjs,vuejs

vuejs是什麼

在2014年年初開源的時候，尤雨溪大神說過它的定位是一個檢視層庫並不是一個框架，但是隨著vue-router和vue-resource的推出，他已經成長為一個框架了，他是一個輕量級MVVM框架，它的體積很小，他是一個資料驅動+元件化的前端開發，資料驅動和元件化是vuejs的核心思想，github社群很完善

vuejs和angularjs和reactjs對比（如何做技術選型）

選型有一個很重要的參考，就是看他的社群如何，不過只看社群做技術選型是遠遠不夠的，因為這三者社群都是很棒的，除了看社群還要對比其他地方，

vuejs更輕量，gzip後大小隻有20k+，angular有56k，react有44k，所以對於移動端來說vuejs更適合
vuejs更易上手，學習曲線平穩。angular入門是最難的，因為它的概念太多，完全顛覆了之前前端開發的模式和思維，比如一些依賴和註冊，完全不知所云。angular是一幫搞java的工程師寫的，很多思想都延用了後端的知識，所以對新手前端來說是一個非常大的挑戰。
react和angular比相對好些，不過他也有他自己的一套jsx語法，這個對一些新手來說也是很大的挑戰，而且react學習會附有react全家桶，包括react-router等，學習曲線也是比較陡峭的。
而vuejs上手比較簡單，開發元件和語法也更符合習慣，官網很完善很簡單，demo也很容易懂。
vuejs吸取了兩家之長，借鑑了angular的指令和react的元件化，總能看到angular和react的影子，但是他也有其他兩家沒有的比如computed。