Vue和React有什麼區別,優劣?我到底應該選擇哪誰?

来源:https://www.cnblogs.com/learninpro/archive/2020/05/15/12893077.html
-Advertisement-
Play Games

前端開發框架從最開始的jquery時代,到後來backbone,angular1,再到現在vue和react兩分天下,也才用了不到十年的光景。 最開始jquery是為瞭解決瀏覽器相容性的問題而火起來的,準確的說它只是一個庫,而不能成為框架。但隨著前端頁面的複雜度的增加,漸漸數據驅動和mv*的思想開始 ...


  前端開發框架從最開始的jquery時代,到後來backbone,angular1,再到現在vue和react兩分天下,也才用了不到十年的光景。

  最開始jquery是為瞭解決瀏覽器相容性的問題而火起來的,準確的說它只是一個庫,而不能成為框架。但隨著前端頁面的複雜度的增加,漸漸數據驅動和mv*的思想開始形成,有了backbone,angular等先驅。再之後隨著AST,Bable,Webpack等技術的興起,一個逐漸晚上的前端框架體系也隨之建立了起來,如今最入門的就是vue和react了。

  但由於vue和react要解決的事情和思想非常相近,所以導致很多人在選擇到底使用哪種框架進行學習和開發的時候異常頭痛。這個問題還是比較難解決的,仁者見仁智者見智,目前看來不僅公司和公司之間選擇不同,就連很多大廠在部門之間也存在分歧,一個公司里很多部門都在使用不同的框架。

 

 今天我就我自己的經驗來分析一下這兩款框架的區別,看看你看重那個方面。

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

  

  好了,說了真麽多,我猜你可能還是不知道要選哪個框架,哈哈哈

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ElementUI 中的el-upload 上傳圖片 我進行了二次封裝。(預設大家都是有一定的vue基礎的,細節就不過多的講了) 在項目中我們主要拿到圖片或者其他的一些參數 ,我這裡是上傳後返回的Guid, 所以上傳的動作我就集中處理了,像 input 的 v-model 直接獲取到參數 頁面展示代 ...
  • 兩個數組取交集 vs 多個數組取交集 => js reduce函數的妙用 <script> // 值集數組 let arr1 = [1,2] let arr2 = [2,3] let newArr1 = arr1.filter(val=>{ return new Set(arr2).has(val) ...
  • 我們在開發中會封裝許多的通用的組件,那麼如何封裝好一個組件時,在調用的時候綁定click事件呢?1.child組件 <template> <div class="child" @click="$emit'childClick',123) /> //說明:第一個參數:childClick ,是事件名, ...
  • //Android微信中,藉助WeixinJSBridge對象來阻止字體大小調整 (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFo ...
  • 【目錄】 一、number 二、string 三、array 四、math 五、date 六、自定義對象 一、number 二、string 三、array 四、math 五、date 六、自定義對象 參考閱讀: https://www.cnblogs.com/xiaoyuanqujing/arti ...
  • electron設置托盤 // 設置系統托盤 const setAppTray = () => { // 托盤對象 var appTray = null // 系統托盤右鍵菜單 var trayMenuTemplate = [ { label: '退出', click: function() { / ...
  • 1、Web開發分類與區別 人們通常將Web分為前端和後端,前端相關的職位有前端設計師(UI/UE),前端開發工程師,後端相關的有後端開發工程師。 2、技術棧區別 在各大招聘網站上,公司對前端開發工程師的要求莫過於精通HTML,CSS,JS,有良好的交互設計能力等。再看公司對後端開發工程師的要求: 比 ...
  • # jQuery工具方法 - 1.$.type() 判斷數據類型 $.isArray() $.isFunction() $.isWindow() ```js console.log($.type(undefined));//undefined console.log($.type('abc'));/ ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...