前端開發框架從最開始的jquery時代,到後來backbone,angular1,再到現在vue和react兩分天下,也才用了不到十年的光景。 最開始jquery是為瞭解決瀏覽器相容性的問題而火起來的,準確的說它只是一個庫,而不能成為框架。但隨著前端頁面的複雜度的增加,漸漸數據驅動和mv*的思想開始 ...
前端開發框架從最開始的jquery時代,到後來backbone,angular1,再到現在vue和react兩分天下,也才用了不到十年的光景。
最開始jquery是為瞭解決瀏覽器相容性的問題而火起來的,準確的說它只是一個庫,而不能成為框架。但隨著前端頁面的複雜度的增加,漸漸數據驅動和mv*的思想開始形成,有了backbone,angular等先驅。再之後隨著AST,Bable,Webpack等技術的興起,一個逐漸晚上的前端框架體系也隨之建立了起來,如今最入門的就是vue和react了。
但由於vue和react要解決的事情和思想非常相近,所以導致很多人在選擇到底使用哪種框架進行學習和開發的時候異常頭痛。這個問題還是比較難解決的,仁者見仁智者見智,目前看來不僅公司和公司之間選擇不同,就連很多大廠在部門之間也存在分歧,一個公司里很多部門都在使用不同的框架。
今天我就我自己的經驗來分析一下這兩款框架的區別,看看你看重那個方面。
- 模板引擎:vue的視圖模板採用類html的寫法加上自己的指令與自定義屬性組成,在多數情況下是要比react的JSX寫法開發效率高和清晰的。但是在複雜場景下,類html的寫法有時候很比較麻煩或者難以勝任,這個時候就凸顯出JSX的語言表現力的豐富了。不過vue目前也支持jsx的寫法。
- 樣式:vue的樣式和模板可以寫在同一個文件里,而react的主流做法還是要單寫一個樣式文件,雖然區別不大,但還是更喜歡能少寫幾個文件的感覺。另外vue的class有多種寫法,sting/object/array都可以還能自動merge,體驗很好。而react本身不行,需要藉助類似classname的庫來實現。
- 數據響應邏輯:vue使用代理/攔截的方式使得我們直接修改data就可以了,而react需要使用setState api來實現。另外由於vue的實現方式,所以vue知道我們修改了哪些東西,並且還有watch/computed等鉤子公開發人員使用,而反觀react就比較不人性化了,需要我們自己在業務邏輯層diff才知道。
- 配套設施:這裡指的就是常用的配套庫(全家桶),vue基本上是官方給了我們一個最佳實踐,直接按照官方推薦的全家桶來構建我們的應用就夠了,而react就比較開發,對於社區依賴更多,所以相關的配套設施需要我們自己去找去接,社區大神們的思想各不相同,所以比vue要費心。比如我要用redux還需要引個react-redux,而且居然還不支持非同步,我還得引個redux-thunk,可能我還得跟redux-saga對比下,較真一點的可能還不敢人云亦云,還要親自看看源碼才行,另外明知道我是個選擇困難症患者還要有個mobx來搗亂。可能當我找到自認為是最佳實踐的方案的時候,項目已經黃了或者社區又出了新的方案(哭暈在廁所 =。=...)
- 性能:在vue1.0時代,vue的性能的確是比react要弱的,但進入2.0時代,vue果斷借鑒了一大波react在性能方面的優化經驗(這裡不論這種做法怎麼樣啊),反正瞬間就把性能基本給拉平了。再加上react性能需要非常有經驗,非常註意你自己代碼的寫法才能發揮的出來,比如你要配合reselect庫或者對purecomponent/shouldupdate等很瞭解。否則你寫出來的應用的性能必定是奇慢的,而vue你其實不必關註那麼多,這得益於他的數據響應的內部實現。在絕大多數情況下你不需要怎麼關註你的寫法是否導致了很多多餘的計算和渲染開銷。
- 使用人群:這點是vue的說大不大說小不小的命門,vue在國外是沒有react知名的,所以在國外react是一枝獨秀,導致你學習vue可能無法跟世界接軌。另外一個就是不知道曾幾何時,面試官有意無意的會透露出如果你只會vue,那你一定是個初學者是個low逼....一方面原因的確vue的上手難度要比react小很多,剛纔也說了很多vue不需要關心這關心那,所以新手學習vue的更多。但我其實很不能理解這點!!為什麼學習vue就要比學習react低人一等。為啥新手學的多的東西就不能是好東西,非的是晦澀難懂,很難掌握的東西才能凸顯出你的與眾不同和不凡麽?我覺得這個價值觀是非常的扭曲的。在我看來不說設計思想,就單說vue的實現方式我認為是要比react高級和先進的。
好了,說了真麽多,我猜你可能還是不知道要選哪個框架,哈哈哈