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

近年來(lái)前端開(kāi)發(fā)趨勢(shì)

1.舊瀏覽器逐漸淘汰，移動(dòng)端需求增加:

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷，提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷、重慶小程序開(kāi)發(fā)公司、公眾號(hào)商城、等建站開(kāi)發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

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

                                        

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

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

                                            

 

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

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

回到頂部(go to top)

MVVM框架

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

               

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

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

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

回到頂部(go to top)

Vuejs以及其生態(tài)

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

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

2.核心思想

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

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

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

回到頂部(go to top)

Vue vs Angular React 

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

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

Vue.js相對(duì)來(lái)說(shuō)學(xué)習(xí)曲線比較平穩(wěn)。

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

網(wǎng)站標(biāo)題：從Vue.js窺探前端行業(yè)
文章路徑：http://muchs.cn/article32/pihpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、移動(dòng)網(wǎng)站建設(shè)、建站公司、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)