Vue和React的區別,你pick誰?

  • 時間:2018-07-19 22:52 作者:技術學派 來源:技術學派 閱讀:394
  • 掃一掃,手機訪問
摘要:在6月份,Vue在GitHub上的star數量超過了React,在此之后,各大論壇上對 Vue 和 React 的爭論就愈演愈烈,Reddit 上還有開發者專門開了一個 Vue vs React 的話題。所以小編搜集了少量資料,對兩大框架進行了全面的比照,看看哪個框架更適合使用在新的基礎框架中,希望

在6月份,Vue在GitHub上的star數量超過了React,在此之后,各大論壇上對 Vue 和 React 的爭論就愈演愈烈,Reddit 上還有開發者專門開了一個 Vue vs React 的話題。所以小編搜集了少量資料,對兩大框架進行了全面的比照,看看哪個框架更適合使用在新的基礎框架中,希望對大家能有少量啟發和幫助。

Vue和React大比拼,你pick誰?

React vs Vue

下面我們將在學習曲線、代碼風格、單個文件組件、性能、靈活性、工具、移動開發、社區、成熟度、團隊支持等方面對 React 和 Vue 進行比較。

學習曲線

React

React的官方文檔算是一份比較完整的的了,盡管為新手們提供了少量入門指南,但是假如是具備肯定的前臺框架開發經驗的前臺程序員們可以在幾個小時里快速的了解框架的核心原理。但是React的文檔盡管完整,但卻不如Vue的官方文檔那么清晰有序。

React 的官方文檔涵蓋了必要的少量流程,但依然缺少少量邊緣使用例說明。隨著項目越變越大,這些邊緣使用例會變成使用戶痛點。

React 不算是一個完整的框架,它盡管提供了少量核心,而其余大多數高級的組件是由社區開發的,這無疑給學習曲線添加了少量復雜性。

Vue

Vue 的庫可以簡單地作為 HTML 頁面資源加載,因而,用 Vue 無需額外的構建。這是一個很低調的庫,在不知不覺中為我們節省了很多的時間。

由于 Vue 和 React 有很多通使用的概念,開發人員從 React 轉到 Vue 會相對容易少量。另外,Vue 的官方文檔寫得非常詳盡,涵蓋了開發人員在開發 Vue 應使用程序時需要的所有內容。

Vue 的定義比 React 更嚴格。在 Vue 中,很多問題直接在文檔中得到理解答,不需要在其余地方搜索答案。

代碼風格

React

React框架中引入了一系列基于函數式編程的概念,簡化了 UI 應使用程序的開發過程。最值得注意的是:

JSX支持在 JavaScript 代碼中編寫 HTML,它也是 React 作為函數式編程范式的強大推動力之一,在這個領域內,它是佼佼者。

它的組件生命周期提供了一種直觀的方式來連接組件“生命周期”中的特定事件(如創立、升級等)。

Vue

作為一個比 React 和 Angular 都更年輕的框架,Vue 從它們那里借鑒了好的部分,是函數式和面向對象編程的混合體。

默認情況下,Vue 的編碼風格在某些方面與 Angular 有點類似,同時又消除了 Angular 的大部分痛點。Vue 將 HTML、JS 和 CSS 分開,就像 Web 開發人員已習慣了多年的傳統開發方式,但假如你喜歡,也可以用 JSX。

Vue 的組件生命周期比 React 更直接和直觀。一般來說,Vue 的 API 比 React 更寬泛但更簡單。

單文件組件

React

在 React 中,由于用了 JSX,單文件組件是作為 JavaScript 板塊而存在的,因而,React 提供了特定的方式來編寫 HTML、CSS 和 JavaScript。

用 JavaScript 編寫所有的東西可以減輕在組件內部創立動態 HTML 的負擔。當然,在用 JSX 時,可以用純 JavaScript 來生成模板。

也就是說,由于 React 的特殊語法,在 React 中編寫組件需要更多的學習和練習。

Vue

Vue 的單文件組件分為三個獨立的部分:< template>、< script>和< style>,每個部分都包含相應類型的代碼,因而對于傳統型 Web 開發人員來說會更方便。

作為一個漸進式框架,Vue 提供了簡單的定制能力。例如,只要要一個簡單的配置,即可以用 JSX 代替< template>。另外,只要要在< style>中增加 lang=“scss”屬性,即可以編寫 SCSS 而不是純 CSS。相似地,將scoped 屬性增加到< style>中,Vue 組件即可以實現開箱即可使用的 CSS 作使用域(也就是 CSS 板塊)。

React 的 JS/JSX 組合用起來沒什么問題,只是有時候顯得有點混亂(特別是在增加樣式組件時)。需要指出的一點是,在用 SFC 時需要額外的構建步驟,而 Vue 不需要。假如你選擇了 React,這可能會是一個問題,由于 JSX 需要額外的構建步驟。假如你希望可以直接將腳本文件加入項目中而不需要重新構建,那么 React 可能不是你的菜,除非你愿意用 React.createElement() 代替 JSX。所以,在這種情況下,Vue 可能會是更好的選擇。

Vue和React大比拼,你pick誰?

靈活性

React

React 專注于 UI,所以在構建 UI 組件時可以從它那里取得很好的支持。

React 官方庫不提供少量高級功能,如狀態管理。大多數 React 應使用程序都用 Redux 進行狀態管理,而 MobX 也正在取得人們的關注。

router 不屬于官方庫的一部分,而是作為第三方包,由 React 團隊提供支持。

Vue

作為一個漸進式框架,Vue 只允許用最基本的功能來構建應使用程序,但同時也提供了少量開箱即可使用的東西:使用于狀態管理的 Vuex、使用于應使用程序 URL 管理的 Vue Router、Vue 服務器端渲染。

工具

React

React 有一個叫作 create-react-app 的第三方 CLI 工具,可作為在 React 項目中構建新應使用程序和組件的腳手架。

CLI 工具還支持運行單元測試和端到端測試、代碼 linting 和本地開發服務器。

在 IDE 方面,React 官方和社區都提供了非常好的支持。

Vue

Vue 有一個叫作 Vue CLI 的官方 CLI 工具,與 React 的 create-react-app 非常類似,Vue CLI 為新開發的應使用程序提供了腳手架。

此外,主要的 IDE 對 Vue 都有很好的支持(不如 React,但有 WebStorm 和 VSCode 坐鎮)。

在某些方面,Vue 的工具真的很棒。另外,Vue 與 Typescript 的集成現在還不完美,假如考慮與 TS 集成,還是選擇 React。

移動開發

React

React 有一個使用于構建原生移動應使用程序的移植版本,也就是 React Native,它是當前“編寫一次(在 JavaScript 中),四處用(在原生 iOS 和 Android 中)”的處理方案。

生產環境中有很多用 React Native 構建的應使用程序。

Vue

對于 Vue 來說,構建移動原生應使用程序不僅只有一種選擇。與 React Native 不一樣的是,在 Vue-Mobile-Native 領域并沒有明確的領導者。

NativeScript 可能算得上是佼佼者(它也是 Angular 的領先處理方案),但除此之外還有 Weex 和 Quasar。

社區

React

在 StackOverflow 網站上,用 #reactjs 標記的大概有 88,000 個問題。超過 40,000 個 npm 包可供 React 開發人員下載用。

在最近的一個有關前臺工具調查中,超過 40%的受訪者表示他們對用 React 感到滿意。

React 的社區的確很重要,但比 Vue 社區更分散,而且很難為常見問題直接找到答案。

Vue

在 StackOverflow 網站上,用 #vue 標記的問題有 18,000 個。可安裝的 npm 包有近 10,000 個。

在最近的一次調查中,17%的受訪者表示他們對用 Vue 感到滿意。但事實上,與 React 相比,有兩倍的開發人員表示對學習 Vue 感興趣,因而 Vue 開發人員市場的增長在未來可能會比 React 更快。

在 GitHub 上,Vue 的 Star 數超過了 React。

Vue 開發中的大多數問題都可以直接在文檔中找到答案,當然,來自社區的答案會更加精準。

支持

React

React 由 Facebook 創立和維護,在 Facebook,有一個團隊定期為 React 提供支持(React 也被使用于 Facebook 的很多項目中)。

據稱,Facebook 的 React 團隊包括 10 名專職開發人員。但值得注意的是,Facebook 研發部門的多個團隊正在將 React 使用于內部和外部的項目中,并且每個團隊都可以將變更請求推送到代碼庫中。

React 基于 RFC,沒有所謂的發展路線圖。

Vue

Vue 是一個獨立的庫,由尤雨溪創立。他還負責管理 Vue 的維護和發展路線圖。

Vue 團隊包括 23 名專職開發人員。

Vue 的路線圖可以在他們的 GitHub 倉庫中看到(https://github.com/vuejs/roadmap)。

整體優點

React

  • 行業標準
  • 大量熟練用該框架的前臺開發者
  • 更容易招到有經驗的前臺開發者
  • 有穩固的過去和大公司的支持,更安全的未來和穩固性
  • 龐大的社區,大量的工具和第三方庫
  • Web 和移動應使用可以共享少量代碼

Vue

  • Vue 內置的核心板塊(Vuex、Router 等)非常棒
  • 面向“未來”,而不是“現在”
  • 保持獨特,引領潮流而不是跟隨
  • 更快的起步,前臺開發者和后臺開發者都感覺 Vue 代碼很自然,速度很快
  • 更好地促進全棧文化,允許跨產品開發

總結

React 有更大的生態圈和更好的工具,外面有更多面向 React 開發人員的工作崗位。Vue 更容易上手,并提供了強大的靈活性和 API,可以避免 React 的那些復雜模式。有些機制——比方向父組件發送事件而不是將回調作為屬性傳遞——可以讓代碼更清晰,但同時也是一個額外的籠統。

Vue 有更多與 Vue 緊密集成的核心庫,而 React 的核心庫較少,但一般性使用途的庫較多,通常由社區開發。隨著生態系統的發展,最終會有大量的庫做大致相同的事情。大型生態圈最重要的作使用在于,某人可能已經處理了你正面臨的問題,所以,從這方面來說,擁有更大生態圈的 React 占據了優勢,也是一個重要的考慮因素。

在很長一段時間內,React 和 Angular 都是框架游戲的主要參加者,而且每隔一小段時間就會出現一個新框架。它們試圖擠進來分一杯羹,但都沒有成功,除了Vue。

React 是現在的領頭羊,無論是在行業炒作還是社區支持方面。React 可以輕松構建復雜而直觀的 Web 和移動應使用程序,但這是有代價的——框架的復雜性和樣板代碼。小型項目相對直觀,但大型項目往往變得很復雜。React 引入了很多新的范式,這對學習曲線有少量負面影響。

Vue 更加精簡,是一個新穎的框架,而且簡單易學,樣板代碼少,性能高,靈活且完整。現在很多 Web 應使用程序可以用 Vue 構建,并且速度比 React 快。Vue 很有趣,開發起來也很簡單。

最近,前臺社區內開始出現的關于 Vue 穩固增長的良好氛圍,暗示著 Vue 很快就會變得像 React 一樣受歡迎。

分享 IT 技術和行業經驗,請關注-技術學派

  • 全部評論(0)
最新發布的資訊信息
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
【系統環境|軟件環境】node中的path模塊(2019-12-04 14:23)
手機二維碼手機訪問領取大禮包
返回頂部
澳洲幸运10精准人工计划