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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...