什么是Vue？

Vue[1] 是一個用于構建用戶界面的漸進式、可逐步采用的 JavaScript 框架。它由 Evan You[2] 于 2014 年創(chuàng)建，并由一個活躍的開發(fā)者社區(qū)負責維護。

Vue 設計得非常輕量級、靈活和強大。它建立在一個基于組件的架構上，以組件為中心，可以更輕松地創(chuàng)建動態(tài)用戶界面。它還有一個強大的雙向數據綁定系統(tǒng)，可以讓我們輕松地保持數據和用戶界面同步。

Vue 的API簡單但功能強大，易于上手，而且體積?。s 20KB），非常適合移動應用程序或單頁應用程序（SPA）。說 Vue 是一個"漸進式"框架，意味著它不會自動提供一堆我們可能不需要的東西。相反，我們可以從最基本的功能開始構建響應式應用程序，然后隨著項目的發(fā)展逐步導入更多功能。所有這些都讓我們避免了模板代碼和尺寸過大的困擾。

Vue趣事

• Vue 的語法受到 Angular 和 React 的啟發(fā)，旨在讓已經熟悉這些框架的開發(fā)人員易于學習。
• Vue 的名稱源自法語動詞 "vue"（看）。
• Vue 的標志是一個抽象的字母 "V"。

什么是React？

React[3] 是一個用于構建用戶界面的 JavaScript 庫，由 Facebook 于 2013 年創(chuàng)建。它最初用于構建 Facebook 網站，后來成為開發(fā)web應用程序最流行的 JavaScript 框架之一。

React 為開發(fā)人員提供了一種聲明式編程風格，更易于閱讀和調試。它還使用虛擬 DOM，速度比傳統(tǒng) DOM 更快，性能更好。

React 基于組件的方法使開發(fā)人員能夠利用可快速、輕松地組合在一起的可重用組件創(chuàng)建強大的應用程序。這使它成為快速原型開發(fā)和應用程序的絕佳選擇。

React趣事

• 全球一些最受歡迎的網站都在使用 React，其中包括 Facebook、Netflix 和 Airbnb。
• React 非常注重性能，其渲染速度明顯快于主要競爭對手 Angular。
• React 是最流行的前端 JavaScript 庫。

Vue vs React：全面比較

現在，我們將進行一次 Vue 與 React 的壓力測試，看看它們在整個開發(fā)鏈路中的一些關鍵方面有哪些優(yōu)勢。這些方面包括以下內容：

• 「靈活性」。根據項目需求定制和調整有多容易，既可以使用其核心組件，也可以通過第三方附加組件來實現，而第三方附加組件通常無法獲得同等程度的文檔和支持。
• 「開發(fā)和工具」。建立項目和開始編碼有多容易。這一點非常重要，因為它將決定我們啟動項目的速度，以及新開發(fā)人員提高工作效率的速度。
• 「性能」。這一點非常重要，因為它決定了應用程序在用戶設備上的運行效果。我們不應該低估這一點，因為它意味著愉快的應用體驗（用戶會不斷回訪）和令人沮喪的應用體驗（用戶可能會放棄）之間的差別。
• 「文檔和社區(qū)支持」。這將從根本上決定開發(fā)人員在遇到困難時獲得幫助的速度，以及找到常見問題解決方案的難易程度。

下面就開始比較吧。

React 靈活性

React 以其靈活性而著稱，因為它的核心只是一個UI庫。它允許開發(fā)人員在編寫代碼時使用基于組件[4]的編程方法或函數式編程[5]方法。這意味著開發(fā)人員可以選擇自己最擅長的編碼風格，并以此創(chuàng)建功能強大的應用程序。

React 還支持各種庫和工具，因此很容易與現有技術和項目集成。例如，React 可以與 Redux[6] 結合使用以進行狀態(tài)管理，也可以與 Next.js[7] 結合使用以進行服務端渲染[8]。

• 「優(yōu)點」：高度可定制和可擴展；支持廣泛的庫和工具。
• 「缺點」：可擴展性主要通過第三方插件實現。

Vue 靈活性

Vue 也提供很大的靈活性，因為我們可以在開始時只使用核心庫，然后隨著項目的發(fā)展逐步采用所需的內容。Vue 也支持基于組件[9]的編程方法或函數式編程[10]方法（包括 JSX），并支持各種庫和工具。

但與 React 不同的是，這些擴展大部分都是由同一個團隊開發(fā)的，因此集成和支持都非常出色。例如，Vue 甚至原生提供了服務端渲染[11]功能。這讓我們可以放心地擴展我們的項目，因為我們知道，無論將來我們需要做什么，Vue 都能滿足我們的需求。

• 「優(yōu)點」：高度可定制和可擴展，對庫和工具提供廣泛的原生支持。
• 「缺點」：無。

使用 React 進行開發(fā)

通過第三方插件，React 還提供路由[12]和狀態(tài)管理[13]，以管理導航流和處理應用程序數據。React 的支柱之一 JSX[14] 可以讓開發(fā)人員輕松地在 JavaScript 中編寫類似 HTML 的語法，從而創(chuàng)建組件并將它們快速組合在一起。

• 「優(yōu)點」：易于設置和上手；有許多第三方插件。
• 「缺點」：我們可能經常使用的許多擴展都不是官方的。

使用 Vue 進行開發(fā)

Vue 為路由[15]和狀態(tài)管理[16]提供了原生模塊，從而實現了導航流和應用程序數據的管理過程。Vue 還提供模板語法[17]，允許開發(fā)人員創(chuàng)建易于重用和維護的組件。

盡管如此，由于 Vue 社區(qū)不像 React 社區(qū)那么龐大，要找到好的第三方解決方案還是有點困難。(不過有一個龐大的中文 Vue 社區(qū)，我們稍后再談）。

• 「優(yōu)點」：易于設置和上手；原生模塊可滿足大多數開發(fā)需求。
• 「缺點」：沒有那么多第三方插件，維護也不完善。

React 工具

React 很容易設置并開始開發(fā)，它自帶用于開發(fā)和調試的 Visual Studio Code 擴展[18]（由微軟開發(fā)）。

名為 Create React App[19] 的官方 CLI 允許我們快速設置基本的腳手架，以便立即開始編碼。

React 還有一套開發(fā)人員工具[20]（目前處于測試階段），用于檢查 React 組件、編輯props和狀態(tài)以及發(fā)現性能問題。

• 「優(yōu)點」：用于調試和檢查組件的強大工具。
• 「缺點」：CLI 功能有限，性能不佳。

Vue 工具

Vue 也很容易設置和開始開發(fā)，它也有自己的 Visual Studio Code 擴展[21]、用于快速開發(fā) SPA 的 CLI[22]（比 React 的 CLI 功能更全面、更強大）以及自己的插件系統(tǒng)[23]。

此外還有 Vue Devtools[24]，一個用于調試 Vue 應用程序的官方瀏覽器 devtools 擴展。

此外，Vite[25] 是用于現代web開發(fā)的下一代構建工具，具有極快的冷啟動和增量編譯時間。它是 Vue 團隊的一個官方項目，因此能與 Vue 生態(tài)系統(tǒng)無縫集成，并提供一些高級功能，如熱模塊替換和tree-shaking。

• 「優(yōu)點」：用于調試和檢查組件的強大工具，以及用于快速開發(fā)的 Vite。
• 「缺點」：無。

React 性能

React 的速度相當快，因為它的設計目的只有一個而且做得很好：渲染用戶界面。因此，無需太多額外工作，React 的性能就會非常出色；當然，還有進一步優(yōu)化性能的具體指導原則[26]。

React 支持服務端渲染，這有助于進一步提高web應用程序的性能，尤其是在移動設備和較慢網絡連接上。

• 「優(yōu)點」：開箱即用，性能穩(wěn)定；可根據特定指南進行優(yōu)化；支持服務端渲染。
• 「缺點」：速度不如 Vue 快。

Vue 性能

React 在性能方面非常出色，而 Vue 甚至更快。它的虛擬 DOM 可以確保在數據發(fā)生變化時只對必要的元素進行重新渲染，因此它的性能和效率都很高。

Vue 可以比 React 做得更多，但性能仍然優(yōu)于 React，這充分證明了 Vue 創(chuàng)建者 Evan You 的軟件工程技能和強大的設計原則。??

Vue 還原生支持服務端渲染，因此可以進一步提高性能。

• 「優(yōu)點」：開箱即用，性能非常快；可根據特定指南進行優(yōu)化；支持服務端渲染。
• 「缺點」：無。

React 的文檔和社區(qū)支持

React 擁有詳盡的文檔[27]和非?；钴S的社區(qū)[28]。以下是一些最活躍的社區(qū)：

• DEV 的 React 社區(qū)[29]
• Hashnode 的 React 社區(qū)[30]
• Reactiflux 的在線聊天[31]
• Reddit 的 React 社區(qū)[32]

Vue 的文檔和社區(qū)支持

誠然，Vue 社區(qū)比 React 社區(qū)小，但仍有許多愛好者：

• Vue 論壇[33]
• Reddit 的 Vue 社區(qū)[34]
• Vuetify 社區(qū)[35]
• Quasar 框架社區(qū)[36]

Vue 的文檔一直備受贊譽，可能是此類項目中最好的文檔。它非常清晰、簡潔、易懂，而且布局精美。(這也是我成為 Vue 開發(fā)人員的一個關鍵因素）。

Vue vs React：總結

經過全面比較，我們可以得出這樣的結論：React 和 Vue 都是開發(fā)現代web應用的絕佳選擇，它們提供了大量的靈活性和強大的工具來完成工作。

不過，「Vue 在性能、靈活性和文檔方面更勝一籌，而 React 則在采用率、第三方工具和社區(qū)支持方面更勝一籌。」

受歡迎程度

就受歡迎程度而言，React 是迄今為止這兩種框架中最受歡迎的，而 Vue 則落后于 Angular（本文不涉及 Angular）。

React 自 2013 年誕生以來，擁有一個龐大的開發(fā)者社區(qū)，他們不斷使用并為該平臺做出貢獻。它還得到了 Meta（Facebook）的支持，并被用于創(chuàng)建一些世界上最流行的應用程序。

另一方面，Vue 比 React 更年輕，有時被描述為 Angular 和 React 的混合體。Vue 誕生于 2014 年，由于其易用性和對開發(fā)人員友好的特性，從那時起，Vue 就受到了越來越多的關注。Vue 還被用于創(chuàng)建流行的應用程序，這將在下一節(jié)中介紹。

使用 Vue 和 React 創(chuàng)建的知名應用程序

React 已被用于創(chuàng)建一些世界上最流行的網站和移動應用程序。其中包括 Facebook、Instagram、Airbnb、Dropbox 和 Twitter。

Vue 也被用于創(chuàng)建一些世界上最流行的應用程序。其中包括 9GAG、Alibaba、Xiaomi、GitLab 和 Wizz Air。

以下是一些有用的、非官方的 Vue 和 React 項目展示列表：

• React 展示[37]
• 使用 React.js 制作[38]
• 使用 Vue.js 制作[39]
• Vue 項目[40]
• Vue 示例[41]

Vue vs React：何時使用？

好吧，我們在開始這一部分之前就知道沒有"正確"答案，好嗎？

• 對于需要輕量級靈活框架的項目來說，Vue 是一個不錯的選擇。對于需要大量交互性的項目來說，Vue 也是不錯的選擇。
• 對于需要高度可擴展性和可維護性的項目來說，React 是一個不錯的選擇。它也非常適合需要大量定制的項目。

以上就是在 Vue 和 React 之間做出選擇的技術原因。不過，在決定使用哪種技術時，還有一些非技術性的原因（可以這么說），比如支持、社區(qū)甚至偏見。接下來，我們將仔細分析其中的一些原因。

10條FAQ

在本節(jié)中，我們將介紹有關 Vue 與 React 的十個實用注意事項。

Vue 和 React 之間的實際區(qū)別是什么？

Vue 和 React 的主要區(qū)別在于，React 是一個用于構建用戶界面的 JavaScript 庫，而 Vue 則是一個用于構建 Web 應用程序的 JavaScript/TypeScript 漸進式框架。"漸進"意味著其功能和范圍可以隨著項目的增長而輕松擴展。

除此之外，React 和 Vue 都采用基于組件的方法，允許開發(fā)人員將復雜的UI分解成較小的組件，以便在不同的項目中重用。Vue 和 React 的性能都很高，當然比 Angular 更強。

為什么 Vue 比 React 更快？

首先要說的是，React（它只是一個UI庫）已經相當快了。然而，Vue 一般來說比 React 更快，因為 Vue 團隊非常注重使其具有高性能和輕量級?？紤]到我們可以用 Vue 做更多的事情，這已經是一項了不起的成就了。

Vue 之所以更快，還因為它采用了虛擬 DOM 實現，只在數據發(fā)生變化時才更新 DOM，而不是每次渲染頁面時都更新。

為什么 React 比 Vue 更受歡迎？

至少在西方世界，React 比 Vue 更受歡迎。React 出現的時間更長，熟悉它的開發(fā)者社區(qū)也更大。

此外，React 是由 Facebook 創(chuàng)建的，這也是吸引許多開發(fā)人員的一個因素。相比之下，Vue 背后并沒有大的技術公司（這取決于你的觀點，也許是壞事，也許不是）。

盡管如此，事實上，在包括中國在內的一些亞洲國家，Vue 比其他任何框架都更受歡迎！

image.png

Vue 比 React 更好嗎？

在回答這個問題時，我們不可能不引起網絡開發(fā)者社區(qū)的關注，因此，我們可以妥協(xié)地說，React 和 Vue 都是很棒的工具。

React 因其簡單性和龐大的社區(qū)而成為許多開發(fā)人員的首選，而 Vue 則提供了更多的內置功能，在某些用例中比 React 性能更好。

最后的答案可以歸結為以下兩點：

• 如果我們了解 Vue，或者對 React 沒有什么經驗，那么 「Vue 會更好」。
• 如果我們了解 React，但沒有使用過 Vue，那么 「React 會更好」（但 Vue 仍然優(yōu)于 React）。

Vue 比 React 更簡單嗎？

是的。Vue 不僅比 React 更容易學習，而且因為 React 基本上是一個（非常好的）UI 庫，而 Vue 實際上是一個框架，所以我們可以用它做更多的事情。

因此，Vue 的"性價比"（可以這么說）--基于你所花的學習時間和你之后能做的事情--是相當高的。

如果我們知道 React，我們能學習 Vue 嗎（反之亦然）？

是的，我們可以。雖然這兩種技術的開發(fā)方法不同，但基本原理是相同的。

無論學習 React 還是 Vue，我們都需要學習一種新的語言/擴展--學習 Vue 時需要學習 TypeScript（為了獲得更好的開發(fā)體驗），學習 React 時需要學習 JSX（出于同樣的原因）。盡管存在諸多不同，但這兩種框架都使用組件，并具有相似的 API，這使得它們之間的切換更加容易。

我們應該從 React 轉向 Vue 嗎？

如果我們的團隊在使用其中任何一種產品時都已經非常出色，并且取得了豐碩成果，那么就堅持使用它。此外，如果擔心第三方擴展和社區(qū)支持，那么使用 React 可能會更好。

現在，如果我們尚未啟動項目，正在尋找更簡單、更靈活的方法，那么 Vue 可能是更好的選擇，因為 Vue 提供了更多開箱即用的功能，而且一般來說比 React 更快。

尋找具有 Vue 專業(yè)知識的開發(fā)人員比較困難，但教授 JavaScript 開發(fā)人員如何使用 Vue 則比較容易。

Vue 比 React 更適合我的職業(yè)生涯嗎？

這要看情況。如果你正在尋找更多的工作機會，那就不一定了。畢竟，React 仍然更受歡迎，甚至可以說是標準（至少在西方）。而在包括中國在內的亞洲許多地方，情況恰恰相反。

如果你想專門從事 JavaScript 開發(fā)，那么這兩個選項都是不錯的選擇，因為 Vue 的市場份額仍在不斷擴大，盡管沒有以前那么快。

Vue 可以與 React 一起使用嗎？

不，不要這樣做。Vue 和 React 是完全不同的工具，彼此不兼容。

那么，我們應該學習 Vue 還是 React？

還是要看情況。比方說，我們需要這樣一個框架：

• 開箱即能做很多事情
• 可以通過官方插件進一步擴展，這些插件將遵循與核心軟件包相同的實踐和指導原則
• 如果需要，可以與 TypeScript 一起使用
• 易于學習
• 在亞洲非常流行
• 沒有任何大公司支持

如果是這樣的話，我們就應該「學習 Vue」！

另一方面，我們可能需要一個庫：

• 使我們能夠創(chuàng)建用戶界面
• 還可以使用官方和非官方插件進行擴展
• 當使用 React Native 時，它甚至可以成為移動項目的基礎
• 在西方世界最為流行
• 由 Meta 提供支持

如果是這樣，我們就應該「學習 React」！

總結

Vue 和 React 都是創(chuàng)建 web 應用程序的強大工具。React 因其龐大的社區(qū)和 Meta 的支持而更受歡迎，而 Vue 則因其簡潔性和性能在過去幾年中獲得了越來越多的關注。

得到科技巨頭的支持并非無關緊要！這基本上意味著資金和開發(fā)人員。對于 Vue 來說，獨立是一個長期的挑戰(zhàn)，因為它需要獲得企業(yè)的采用和開源社區(qū)的支持，才能保持良好的狀態(tài)。

總而言之，如果我們正在尋找一個可以幫助我們快速、輕松地創(chuàng)建用戶界面的庫，React 是一個不錯的選擇--這些界面以后可以成為使用 React Native 構建移動應用程序的基礎。如果我們需要更強大、功能更豐富的東西，Vue 可能是更好的選擇，因為它提供了更多開箱即用的功能，而且一般比 React 更快。

本文譯自：https://www.sitepoint.com/vue-vs-react/

以上就是本文的全部內容，如果對你有所幫助，歡迎點贊、收藏、轉發(fā)~

參考資料

[1]Vue:https://vuejs.org/

[2]Evan You:https://evanyou.me/

[3]React:https://reactjs.org/

[4]基于組件:https://reactjs.org/docs/thinking-in-react.html

[5]函數式編程:https://reactjs.org/docs/hooks-intro.html

[6]Redux:https://redux.js.org/

[7]Next.js:https://nextjs.org/

[8]服務端渲染:https://solutionshub.epam.com/blog/post/what-is-server-side-rendering

[9]基于組件:https://vuejs.org/guide/essentials/component-basics.html

[10]函數式編程:https://vuejs.org/guide/extras/render-function.html

[11]服務端渲染:https://vuejs.org/guide/scaling-up/ssr.html

[12]路由:https://reactrouter.com/

[13]狀態(tài)管理:https://redux.js.org/

[14]JSX:https://reactjs.org/docs/introducing-jsx.html

[15]路由:https://router.vuejs.org/

[16]狀態(tài)管理:https://pinia.vuejs.org/

[17]模板語法:https://vuejs.org/guide/essentials/template-syntax.html

[18]Visual Studio Code 擴展:https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native

[19]Create React App:https://create-react-app.dev/

[20]開發(fā)人員工具:https://beta.reactjs.org/learn/react-developer-tools

[21]Visual Studio Code 擴展:https://marketplace.visualstudio.com/items?itemName=octref.vetur

[22]CLI:https://cli.vuejs.org/

[23]插件系統(tǒng):https://vuejs.org/guide/reusability/plugins.html

[24]Vue Devtools:https://devtools.vuejs.org/

[25]Vite:https://vitejs.dev/

[26]具體指導原則:https://reactjs.org/docs/optimizing-performance.html

[27]文檔:https://reactjs.org/docs/getting-started.html

[28]社區(qū):https://reactjs.org/community/support.html

[29]React 社區(qū):https://dev.to/t/react

[30]React 社區(qū):https://hashnode.com/n/reactjs

[31]在線聊天:https://discord.gg/reactiflux

[32]React 社區(qū):https://www.reddit.com/r/reactjs/

[33]Vue 論壇:https://forum.vuejs.org/

[34]Vue 社區(qū):https://www.reddit.com/r/vuejs/

[35]Vuetify 社區(qū):https://community.vuetifyjs.com/

[36]Quasar 框架社區(qū):https://forum.quasar-framework.org/

[37]React 展示:https://reactshowcase.com/

[38]使用 React.js 制作:https://madewithreactjs.com/

[39]使用 Vue.js 制作:https://madewithvuejs.com/

[40]Vue 項目:https://vuejsprojects.com/

[41]Vue 示例:https://vuejsexamples.com/