從Vue.js窺探前端行業(yè)

近年來前端開發(fā)趨勢

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

舊瀏覽器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox對ES5是完全支持的，移動端大部分瀏覽器是基于webkit內(nèi)核，所以ES5在移動端也是全面支持的，因此vue可以在移動端以及現(xiàn)代瀏覽器中大顯身手。

2.前端交互越來越多，功能越來越復(fù)雜:

現(xiàn)在的前端可謂是包羅萬象，比如高大上的技術(shù)庫和框架、酷炫的運(yùn)營活動頁面、H5小游戲，當(dāng)然前端技術(shù)的應(yīng)用在更多具有商業(yè)價(jià)值的應(yīng)用上，比如下圖。

3.架構(gòu)從傳統(tǒng)后臺MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 遷移

在傳統(tǒng)的MVC下，當(dāng)前前端和后端發(fā)生數(shù)據(jù)交互后會刷新整個(gè)頁面，從而導(dǎo)致比較差的用戶體驗(yàn)。因此我們通過Ajax的方式和后端REST API作通訊，異步的刷新頁面的某個(gè)區(qū)塊，來優(yōu)化和提升體驗(yàn)，同時(shí)把MVC拿到前端來做

回到頂部(go to top)

MVVM框架

1.MVVM框架基本概念:它主要包括各部分View、ViewModel、Model,如下圖。在MVVM架構(gòu)下，視圖和數(shù)據(jù)是不能直接通訊的，它會通過ViewModel這個(gè)中間件來通訊。ViewModel起的是一個(gè)觀察者的職位:當(dāng)數(shù)據(jù)變化，ViewModel觀察到變化，并通知視圖做相應(yīng)的更新；而用戶操作視圖，ViewModel也能監(jiān)聽到變化，然后通知數(shù)據(jù)做改動，從而實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。

2.MVVM框架的應(yīng)用場景

MVVM框架針對具有復(fù)雜交互邏輯的前端應(yīng)用，它提供了基礎(chǔ)的架構(gòu)抽象，并且通過Ajax數(shù)據(jù)持久化，保證前端用戶體驗(yàn)。

所以MVVM框架的好處顯而易見:當(dāng)前端對數(shù)據(jù)進(jìn)行操作的時(shí)候，可以通過Ajax請求對數(shù)據(jù)持久化，而不必刷新整個(gè)頁面，只需改變dom里需要改變的那部分?jǐn)?shù)據(jù)內(nèi)容。特別是在移動端，刷新頁面的代價(jià)太昂貴。雖然有些資源會被緩存，但是頁面的dom、css、js都會被瀏覽器重新解析一遍，因此移動端頁面通常會被做成SPA單頁應(yīng)用。由此在這基礎(chǔ)上誕生了很多MVVM框架，比如Angular.js、react.js、vue.js。

回到頂部(go to top)

Vuejs以及其生態(tài)

vue.js是由國內(nèi)的大牛尤雨溪為主要開發(fā)的，它起初是個(gè)人項(xiàng)目，在2014年初開源就受到廣泛關(guān)注。起初尤大神把它定位是一個(gè)視圖庫而非框架，但隨著vue-router，vue-resource等第三方庫的發(fā)展，Vuejs逐漸成長為一個(gè)框架。

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

2.核心思想

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

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

4.github超過35K+的star數(shù)，社區(qū)完善 

回到頂部(go to top)

Vue vs Angular React 

Vue官網(wǎng)已對各個(gè)主流框架進(jìn)行了比較詳細(xì)的對比分析(中文版地址)，下面進(jìn)行簡單地總結(jié)下；

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

Vue.js相對來說學(xué)習(xí)曲線比較平穩(wěn)。

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