天天看點

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

前面兩篇已經做了細緻的分析,這一篇就總結總結三大主流架構吧

1. angular

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

1.1. 簡介:

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

1.2. 優點:

1.背後靠山(google),有着穩定的維護團隊。且google的Adwords業務就使用了angular,作為一個賺錢的業務,google也會讓它的環境更穩定一些。

2、angular+typescript,google和微軟的雙劍合璧。angular全面支援

typescript

文法,typescript不僅包含es6中的文法,也包括一些新的文法,

最重要的一點是它增加了類型規則,這讓代碼的可讀性和可維護性大大的提高,它也可以讓有java或.net背景的開發人員更快的掌握。

3、完整。其實相對

react

vue

來說,

更可以說是一個架構,而

本身隻能算是一個庫。

自帶了幾乎所有頁面應具有的功能,路由、表單、ajax、模版、雙向資料綁定等等。它原生的form表單子產品非常強大,除了雙向綁定的基本功能,還自帶驗證等,開發人員不需要再去為了這些功能找第三方庫,angular一個架構就包含了這些的所有,是以對于選擇困難症人群,這是一個優點。

4、每個架構都有自己的cli腳手架,可以快速搭建項目雛形。angular-cli自帶國際化。

5、它的每一個元件都是一個檔案夾,html、js、和css檔案是分開的,讓代碼更加清晰。

而且它的各類型檔案單獨存在,在開發中使用任何IDE都可以檢查代碼。可以使用自帶的格式化功能,讓開發過程中的代碼更整潔。

1.3. 缺點:

1、難調試,angular的代碼整潔、規範,很容易維護和審查,但是它的控制台報錯資訊太差了,大部分情況是無法看出問題到底在哪,這就在開發過程中給調試增加了很大的難度。而

在開發中會更加明确的讓開發人員了解到錯誤出在哪裡。

2、太重了,它自帶了很多子產品,這解決了開發人員在選擇上耗費的時間,壓縮後達到了168k,是vue50k的三倍還多,即使在4版本中,拆分了一些功能,但是它依然還是很重

3、學習成本,angular它有超多的概念,有一些單單通過文檔還很難于了解,還有不友好的api文檔。因為它的東西太多,是以api文檔内容也很多,增大了閱讀難度。這就導緻了剛接觸angular的人很難上手。也給心理上造成了很大的壓力,那文檔一看就不想看了,還有api,它是英文的。

2.React

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

2.1. 簡介:

react本身不能算作一個架構,因為它本身的功能有限,不過它有一個龐大的生态系統,全世界無數開發人員在為它提供開源包,
也許對于開發人員一個很難完成的問題已經有其他人員幫你完成了,隻需要引入就好了。       

2.2. 優點:

1、背景(facebook)

2、輕量,體積小本來應該是算在react和vue的優點中,但是在一個大型的項目中,就比如一般的react要用的是 react+redux+react-router或許還要加上發送請求的axios,如果有一些其他的需求還要再加包,vue也同樣,vue+vuex+vue-router+vue-axios,這就導緻react和vue體積小的優點在逐漸減小。是以這一方面我們應該說react和vue的  

可組裝性 是強于angular的,更加靈活,想用什麼用什麼。

3、react的單項資料流機制,這相對angular的雙向資料流來說,因為單向,是以它的各種變化都是可預計的,不像雙向資料流,一旦資料流複雜起來,大家都互相觸發變化,開發人員根本猜不出你改變一個地方會在另外什麼地方跟着變

4、react-native,一個優秀的移動端開發架構,使用react特有的jsx文法,可以讓開發人員像寫pc端頁面那樣去寫移動端,它自動适配了不同的移動端的螢幕分辨率。jsx文法是将html融入到js中。

5、state,所有的資料都儲存在state中,隻可以使用setState方法去改變。開發人員可以把所有的資料都存放在state中,讓所有元件都去這裡邊取資料,當然如果元件過多的話會讓頂級元件的state過重,這時可以将公用的放在頂級state中,各自私用的存放在自身的state中。這樣在開發和維護的過程中隻需要關注各個state就好。

2.3. 缺點:

1、react的靈活性就導緻了在選擇上要耗費成本,确定使用架構的人要去考量這個項目有哪些功能,要用到哪些包還要去看哪些包的品質要高一些,因為相同的功能也會有很多開源人員貢獻包。這些工作耗費的時間成本也是一個項目不得不考慮的問題。這一問題在vue上也同樣存在

2、react的jsx文法,它學習起來并不是很難,應該是比ts要簡單一些。但是它的寫法是把html和js結合起來,這就導緻在一些IDE上,你沒法對它格式化,如果格式化的話,它會将html像js文法那種格式排列。代碼的可讀性要差一些。而且在js中寫html時就要避免兩者出現相同的關鍵字,比如class,在jsx中就要寫成className,還要是駝峰式寫法

3、使用redux,redux在處理資料流的時候是使用saga文法,開發人員要去學習saga的寫法,然後saga的異步操作和同步操作是分開在兩個函數中寫,要在元件本身寫一次,資料流到父元件時還要再寫一遍,寫法上要更複雜,如果想簡化它,就要用一個前端應用架構-DVA,就還是通過加東西來增加開發效率。

4、virtual DOM,vue會跟蹤每一個元件的依賴關系,不需要重新渲染整個元件樹.而對于React而言,每當應用的狀态被改變時,全部元件都會重新渲染,是以react中會需要shouldComponentUpdate這個生命周期函數方法來進行控制

3.Vue

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

-

3.1. 簡介:

vue的一個特點是每一個.vue檔案都是一個元件,在這一個vue檔案中包括style、scripts、template三個标簽來包含css、js和html。
它是最後一個出現的架構,是以在它的實作中,它取其他兩個架構之長,去其他兩個架構之短,借鑒了許多好的設計理念,
比如angular的指令、雙向綁定,react的component思想。       

3.2. 優點:

1、國産架構,是以它對國内開發者在學習它時要更友好。是以它的學習成本是三個架構中最低的。中文的api文檔,我覺得單這一點,就讓國内的開發者在學習vue時能夠節省超多的精力。

2、vuex,完成了redux的功能且在寫法上更加便捷,不再需要dva這種架構去幫他簡便寫法。

3、vue的體積是三個架構中最小的,加上它的處理機制,在非大型項目的對比中,它的性能是最高的。vue在非大型項目有了react和angular的優點,且更簡單,更易上手。

4、vue會跟蹤每一個元件的依賴關系,不需要重新渲染整個元件樹

5、vue實作了資料的雙向綁定,react資料流動是單向的

3.3. 缺點:

1、vue的響應系統無法檢測屬性的添加和删除,以及某些數組的修改,開發人員有時會忽略這一點。

2、它畢竟發展的時間沒有它們長,生态環境要更小,有時在開發中出現了問題,無法在網絡上尋求到有效的幫助。

4.綜合

4.1. 效率:

angular、react和vue都是mvvm模式,(model,view,view-model),angular的資料綁定、操作dom就是通過viewmodel完成的。react和vue的view-model的高效率通過架構自身提供的virtual dom(虛拟dom)來實作,它是一個js對象,我們資料的變化會被映射到這個虛拟dom上,然後虛拟dom再去和真實的dom通過各架構自己的算法進行對比,來修改真實dom結構,這就要比angular的viewmodel直接綁定真實dom樹的操作要更有效率一些     

4.2. 背景:

angular是google更新、維護。

react由facebook更新、維護。

vue是由中國人尤雨溪和他的團隊負責。

4.3. 個人觀點:

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

架構或者庫始終隻是一個有助于開發的工具,無論使用哪個,都需要有紮實的js基礎,沒有哪個架構是脫離它的,我們可以不使用架構,但是不能不用js,隻要把它掌握好了,無論哪個架構都能夠更加輕松的上手

本人開發的微信小程式(已上線)、公衆号及網站二維碼:

有興趣的可以進去看看或者動動你們勤勞的雙手點個關注喲 作者在此謝謝大家了。

1、佩奇網(微信小程式):一個技術部落格小程式,可支援領取外賣優惠券。

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

2、江小魚(公衆号):一個分享程式人生或者經驗哲理的公衆号

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

3、網站:暫時還沒想好放什麼,不過後續想好會放上去

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合
前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合

大家記得收藏前,先點個贊哦!好的文章值得被更多人看到。

關注江哥不迷路,帶你程式設計上高速。​

前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合
前端三大主流架構的差別(三)1.angular2.React3.Vue4.綜合