【51CTO.com快譯】
作者丨Ashika Elza
譯者丨布加迪
策劃丨云昭
應該使用哪種 JavaScript 框架：React 還是 Vue.js?新的 WordPress 編輯器基于 React，而 Vue.js 是 Laravel 社區的流行框架。
開發界兩種最流行的前端 JavaScript 框架是 React.js 和 Vue.js。React 是一種聲明式編程語言，通過虛擬 DOM 與 HTML 文檔進行交互。
React 和 Vue 都為軟件開發人員提供了一種實用的方法來開發各種在線應用程序，但各自有一套最佳實踐，適合不同的業務需求。
Vue.js 簡介
Vue.js 是一種開源 JavaScript 前端框架。單頁應用程序和用戶界面是使用模型 - 視圖 - 視圖 - 模型架構構建的。
Evan You 開發了 Vue.js，它使用“高解耦”，允許 Vue 開發人員逐步創建用戶界面。
Vue.js 是一種用于創建用戶界面的復雜框架。
與其他整體式框架不同，Vue JavaScript 是從頭開始構建的，逐步得到采用。
Vue 框架的主要庫完全專注于視圖層，易于學習，與各種庫和現有項目集成。
與配套庫和現代工具結合使用時，Vue js 還完全能夠支持優雅的單頁應用程序。
Vue.js 的功能特點
1、組件
Vue.js 組件是該框架最重要的功能之一。它們用于封裝可重用的代碼，并補充基本的 HTML 組件。在 Vue.js 應用程序中，您可以構建可重用的自定義元素，然后可以在 HTML 中重用。
2、模板
為了將顯示的 DOM 連接到 Vue 實例數據，Vue.js 包含基于 HTML 的模板。所有 Vue 模板都是有效的 HTML，可以被瀏覽器和符合標準的 HTML 解析器解析。Vue.js 將模板編譯成 Virtual DOM 渲染函數。Vue 在更新瀏覽器之前在虛擬 DOM 內存中渲染組件。如果您改變應用程序的狀態，Vue 可以找到需要重新渲染的最少數量的組件和最少數量的 DOM 操作。
3、反應性
Vue 具有反應性框架，可通過使用簡單的 JavaScript 對象來優化重新渲染。在此過程中，每個組件都跟蹤其反應性依賴項，因此系統確切地知道何時重新渲染哪些組件。
4、路由
Vue 使用官方路由器通過 URL 路由用戶。
單頁應用程序(SPA)無法將連接分區到單個網頁內的特定子頁面，這是最常見的缺陷。
由于 SPA 僅向用戶提供來自服務器的面向 URL 的單個響應，因此將特定的屏幕加入到書簽或將鏈接分配給特定區域就算不可能，也很困難。
為了解決這個問題，一些客戶端路由器使用“hashbang”(#!)來限制動態 URL。
5、轉換
從 DOM 中更新、插入或刪除對象時，Vue 提供了多種技術來運用轉換效果。這包括以下工具：
- 使用 JavaScript 在轉換 hook 期間立即更改 DOM。
- 同化 Velocity.js 第三方 JavaScript 動畫庫。
- 機械地運用 CSS 動畫和轉換類。
- 應使用第三方 CSS 動畫庫 Animate.css。
React 簡介
React 是一種 JavaScript 庫，可用于創建 Web 應用程序界面。通過重用組件，React 或者 ReactJS 幫助為其產品開發更好的框架。ReactJS 由兩部分組成：HTML 代碼和 HTML 文檔。HTML 代碼用于創建用戶視圖層，又叫用戶界面(UI)。所有組件都包含在 HTML 頁面上。
React 由 Facebook 軟件工程師 Jordan Walke 開發。2011 年，React 誕生。另一方面，React 在設計時考慮到 Facebook。React 庫在創建網站和應用程序時派得上用場。Whatsapp 和 instagram 是最有名的兩家采用 React 的公司。因而，React 在 2013 年向公眾發布。
React 的功能特點
1、簡單
React 理解和實施起來簡單得多。因此，任何使用過 JavaScript 的開發人員都可以快速上手 React，開始開發 Web 應用程序。
2、可重用元素
代碼的可重用性是 React 最重要的功能之一。可重用性使開發人員的工作變得輕松。程序員不需要為相關的應用程序組件構建單獨的腳本。因此，可重用代碼。因而，代碼可重用性有助于降低制造成本。
3、簡易的代碼測試
測試是 React 的另一個重要方面。它隨帶的原生工具使測試和調試變得輕而易舉。ReactJS 基于組件的架構減少了所需的調試工作量。更改應用程序的一個組件并不影響其他組件。因此，React 在測試和故障排除方面節省了大量時間。
4、對 SEO 友好
使用 ReactJS 加快了網頁的創建。React 應用程序加載頁面的速度比其他類型的應用程序快得多。因此，React 頁面的跳出率很低。此外，React 的組件(比如 React Helmet 和 React Router)有助于開發對 SEO 友好的應用程序。
Vue 與 React
|
Vue |
React |
|
開源框架 |
庫 |
|
Vue 由 Evan You 開發 |
React 由 Facebook 開發和支持 |
|
min+gzip 后，Vue 大小約為 20 KB |
React 大小約為 100 KB |
|
Vue 使用與 React 相似的虛擬 DOM 和操作型原則。然而說到組件更新和創建，Vue 更快速。 |
React 采用虛擬 DOM，這是不依賴 Web 瀏覽器的對象模型。該框架機械地呈現 HTML 頁面。 |
|
React js可用于構建基于社區的平臺，比如應用市場和論壇。 |
結語
React 和 Vue 都是創建交互式用戶界面的優秀技術。您在決定哪一個最適合項目時，要考慮諸多變化因素，包括貴公司的需求、特定用例、開發人員可用性、環境、時間表和預算。
Vue.js 似乎采用了 React 中引入的許多概念，并加以完善和改進。一些人認為，Vue.js 學起來較易入手。它在 Laravel 社區似乎大受歡迎，我認為 Vue 3 的發布對于 Vue.js 愛好者來說將是重大事件。我認為，Vue.js 有強大的社區，但與 React 沒法相比。
原文鏈接：
https://www.datasciencecentral.com/profiles/blogs/react-vs-vue-which-is-the-best-framework-in-2022
會議推薦
近年來，“大前端”領域不斷拓展和深化。為了更好地適應新的產品形態和用戶需求，大量新的技術理念、技術標準、技術工具不斷涌現。這些新技術讓開發者面臨前所未有的機遇和挑戰。2022 年 4 月 9 日至 10 日的 WOT 全球技術創新大會“大前端新技術實踐”專題中，多位大前端領域知名技術專家將聚焦大前端前沿技術，分享他們對新技術的探索和落地實踐經驗。
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
