從Vue.js窺探前端行業

近年來前端開發趨勢

1.舊瀏覽器逐漸淘汰，移動端需求增長:

舊瀏覽器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox對ES5是徹底支持的，移動端大部分瀏覽器是基於webkit內核，因此ES5在移動端也是全面支持的，所以vue能夠在移動端以及現代瀏覽器中大顯身手。

                                        

2.前端交互愈來愈多，功能愈來愈複雜:

如今的前端可謂是一應俱全，好比高大上的技術庫和框架、酷炫的運營活動頁面、H5小遊戲，固然前端技術的應用在更多具備商業價值的應用上，好比下圖。

                                            

 

3.架構從傳統後臺MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 遷移

在傳統的MVC下，當前前端和後端發生數據交互後會刷新整個頁面，從而致使比較差的用戶體驗。所以咱們經過Ajax的方式和後端REST API做通信，異步的刷新頁面的某個區塊，來優化和提高體驗，同時把MVC拿到前端來作

MVVM框架

1.MVVM框架基本概念:它主要包括各部分View、ViewModel、Model,以下圖。在MVVM架構下，視圖和數據是不能直接通信的，它會經過ViewModel這個中間件來通信。ViewModel起的是一個觀察者的職位:當數據變化，ViewModel觀察到變化，並通知視圖作相應的更新；而用戶操做視圖，ViewModel也能監聽到變化，而後通知數據作改動，從而實現了數據的雙向綁定。

               

2.MVVM框架的應用場景

MVVM框架針對具備複雜交互邏輯的前端應用，它提供了基礎的架構抽象，而且經過Ajax數據持久化，保證前端用戶體驗。

因此MVVM框架的好處顯而易見:當前端對數據進行操做的時候，能夠經過Ajax請求對數據持久化，而沒必要刷新整個頁面，只需改變dom裏須要改變的那部分數據內容。特別是在移動端，刷新頁面的代價太昂貴。雖然有些資源會被緩存，可是頁面的dom、css、js都會被瀏覽器從新解析一遍，所以移動端頁面一般會被作成SPA單頁應用。由此在這基礎上誕生了不少MVVM框架，好比Angular.js、react.js、vue.js。

Vuejs以及其生態

vue.js是由國內的大牛尤雨溪爲主要開發的，它起初是我的項目，在2014年初開源就受到普遍關注。起初尤大神把它定位是一個視圖庫而非框架，但隨着vue-router，vue-resource等第三方庫的發展，Vuejs逐漸成長爲一個框架。

1.它是一個輕量級MVVM框架(只有20來kb)

2.核心思想

  ①數據驅動：數據(model)改變驅動視圖(view)自動更新，DOM是數據的一種天然映射

  ②組件化：擴展HTML元素，封裝可重用的代碼

4.github超過35K+的star數，社區完善 

Vue vs Angular React 

Vue官網已對各個主流框架進行了比較詳細的對比分析(中文版地址)，下面進行簡單地總結下；

Vue.js更輕量，gzip後大小隻有20k+。Angular有56K，React有44K。

Vue.js相對來講學習曲線比較平穩。

Vue.js吸收了兩家之長，借鑑了Angular的指令和react的組件化。