從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的組件化。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM