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

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

舊瀏覽器逐漸被淘汰，移動端需求增長，舊瀏覽器是指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。

vuejs核心思想：

數據驅動和組件化

數據改變省去了手動更改dom變化

每一個組件都對應着一個viewmodel，最終生成一個viewmodel樹