React、Angular、Vue.js三者比較指南


Vue-React-Angular三者區別

 

1. 基本概念
Angular 是一個應用設計框架與開發平台,用於創建高效、復雜、精致的單頁面應用。

React 是一個用於構建用戶界面的 JavaScript 庫

Vue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠為復雜的單頁應用提供驅動。

2. 三者比較
2.1 相同點
1. 都是基於javascript/typescript的前端開發庫,為前端開發提供高效、復用性高的開發方式

2. 都有組件和模板的開發思想

3. 各自的組件都有生命周期,不用的組件可以卸載,不占用資源

4. 都支持指令,如樣式、事件等的指令

2.2 不同點
1. 創始和發行不同:

Angular是由googl提供支持的,初始發行於 2016年9月;React由Facebook維護,初始發行於 2013年3月;Vue是由前google人員創建,初始發行於2014年2月

2. 應用類型不同:

Angular支持開發native應用程序、SPA單頁應用程序、混合應用程序和web應用程序;React支持開發SPA和移動應用程序;Vue支持開發高級SPA,開始支持native應用程序

3. 模型不同

angular基於MVC(模型-視圖-控制器)架構;react和vue是基於Virtual DOM(虛擬的文檔對象模型)

4. 數據流流向不同

Angular使用的是雙向數據綁定,React用的是單數據流的,而Vue則支持兩者。

5. 對微應用和微服務的支持不同

Angular使用的是TypeScript,因此它更適合於單頁Web應用(single page web application,SPA),而非微服務。相反,React和Vue的靈活性更適合微應用和微服務的開發。

6. 對原生應用的支持不同

React Native為iOS和Android開發原生應用;Angular的NativeScript已被原生應用所采用,特別是Ionic框架已經被廣泛地運用在制作混合應用等方面;Vue的Weex平台正在開發之中,尚無下一步使之成為全面跨平台的計划。

7. 框架和庫

Angular 是一個框架而不是一個庫,因為它提供了關於如何構建應用程序的強有力的約束,並且還提供了更多開箱即用的功能。React 和 Vue 是一種庫,可以和各種包搭配。

8. 組件之間傳值方式不同

Angular 中直接的父子組件,父組件可以直接訪問子組件的 public 屬性和方法,也可以借助於@Input 和 @Output 進行通訊。沒有直接關系的,借助於 Service 單例進行通訊;React 組件之間通過通過prop或者state來通信,不同組件之間還有Rex狀態管理功能;Vue組件之間通信通過props ,以及Vuex狀態管理來傳值

React、Angular、Vue.js:對比

什么是Vue?

Vue是一套用於構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,方便與第三方庫或既有項目整合。

與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,並且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue特性:

  1. 模板和渲染函數的彈性選擇

  2. 簡單的語法和項目配置

  3. 更快的渲染速度和更小的體積四

  4. 生命周期

什么是React?

React是一個用於構建用戶界面的JavaScript庫,所有React應用程序的核心都是組件。組件是一個自包含的模塊,可以呈現一些輸出,組件是可組合的。組件可能在其輸出中包含一個或多個其他組件。

React的優點:

1、它提供最大的靈活性和響應能力。

2、由於它是基於文檔對象模型,所以它允許瀏覽器友好地以HTML,XHTML或XML格式排列文檔。

3、具有豐富的JavaScript庫

4、具有很好的靈活的結構和可擴展性

5、React提供了React Native平台,可通過相同的React組件模型為iOS和Android開發本機呈現的應用程序。

React特性:

  1. 單向綁定,先更新model,然后渲染UI元素,數據在一個方向流動,使得調試更加容易。代碼冗余,各種生命周期太麻煩,剛開始接觸好難記。

  2. 用了虛擬DOM。(對虛擬DOM的理解剛開始我不是很理解概念,建議大家去看【深入REACT技術棧】這本書有很好的講解)

  3. 更適合大型應用和更好的可測試性

  4. Web端和移動端原生APP通吃

  5. 更大的生態系統,更多的支持和好用的工具

  6. 組件生命周期

什么是Angular?

Angular是一個是一個用HTML,CSS和JavaScript / TypeScript構建客戶端應用程序的開源Web應用程序框架。,由Google的Angular團隊以及個人和公司社區領導。

Angular是建造AngularJS的同一個團隊的完全重寫。為了避免混淆,該團隊宣布應該為每個框架使用單獨的術語,其中“AngularJS”指的是1.X版本,而“Angular”指的是沒有“JS”指的是版本2及更高版本。

Angular的優點

  • Angular提供一個非常干凈和維護的方式來創造單頁的應用。

  • Angular提供數據綁定功能在HTML中,從而給用戶提供豐富和響應的體驗

  • Angular代碼可進行單元測試。

  • Angular使用依賴注入和利用關注點分離。

  • Angular提供了可重用的組件。

  • 使用Angular,開發人員編寫更少的代碼,並獲得更多的功能。

  • 在Angular中,視圖都是純HTML頁面,並用JavaScript編寫控制器做業務處理。

Vue和React和Angular的區別

1、vue.js更輕量,壓縮后大小只有20K+, 但React壓縮后大小為44k,Angular壓縮后大小有56k,所以對於移動端來說,vue.js更適合;

2、vue.js更易上手,學習曲線平穩,而Angular入門較難,概念較多(比如依賴注入),它使用java寫的,很多思想沿用了后台的技術;react需學習較多東西,附帶react全家桶。

3、vue.js吸收兩家之長,借用了angular的指令(比如v-show,v-hide,對應angular的ng-show,ng-hide)和react的組件化(將一個頁面抽成一個組件,組件具有完整的生命周期)

4、vue.js還有自己的特點,比如計算屬性

  vue React angular
控制器
過濾器
指令
渲染指令
數據綁定 雙向 單向 雙向

以上就是Vue和React和Angular的區別是什么?的詳細內容,更多請關注html中文網其它相關文章!

 

一、Vue.js:
其實Vue.js不是一個框架,因為它只聚焦視圖層,是一個構建數據驅動的Web界面的庫。
Vue.js通過簡單的API(應用程序編程接口)提供高效的數據綁定和靈活的組件系統。
Vue.js的特性如下:
   1.輕量級的框架
   2.雙向數據綁定
   3.指令
   4.插件化

優點: 1. 簡單:官方文檔很清晰,比 Angular 簡單易學。
     2. 快速:異步批處理方式更新 DOM。
     3. 組合:用解耦的、可復用的組件組合你的應用程序。
     4. 緊湊:~18kb min+gzip,且無依賴。
     5. 強大:表達式 & 無需聲明依賴的可推導屬性 (computed properties)。
     6. 對模塊友好:可以通過 NPM、Bower 或 Duo 安裝,不強迫你所有的代碼都遵循 Angular 的各種規定,使用場景更加靈活。

缺點: 1. 新生兒:Vue.js是一個新的項目,沒有angular那么成熟。
     2. 影響度不是很大:google了一下,有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
     3. 不支持IE8:

二、angularJS:
  angularJS是一款優秀的前端JS框架,已經被用於Google的多款產品當中。
  angularJS的特性如下:
    1.良好的應用程序結構
    2.雙向數據綁定
    3.指令
    4.HTML模板
    5.可嵌入、注入和測試

優點: 1. 模板功能強大豐富,自帶了極其豐富的angular指令。
      2. 是一個比較完善的前端框架,包含服務,模板,數據雙向綁定,模塊化,路由,過濾器,依賴注入等所有功能;
     3. 自定義指令,自定義指令后可以在項目中多次使用。
      4. ng模塊化比較大膽的引入了Java的一些東西(依賴注入),能夠很容易的寫出可復用的代碼,對於敏捷開發的團隊來說非常有幫助。
      5. angularjs是互聯網巨人谷歌開發,這也意味着他有一個堅實的基礎和社區支持。

缺點: 1. angular 入門很容易 但深入后概念很多, 學習中較難理解.
   2. 文檔例子非常少, 官方的文檔基本只寫了api, 一個例子都沒有, 很多時候具體怎么用都是google來的, 或直接問misko,angular的作者.
      3. 對IE6/7 兼容不算特別好, 就是可以用jQuery自己手寫代碼解決一些.
     4. 指令的應用的最佳實踐教程少, angular其實很靈活, 如果不看一些作者的使用原則,很容易寫出 四不像的代碼, 例如js中還是像jQuery的思想有很多dom操作.
     5. DI 依賴注入 如果代碼壓縮需要顯示聲明.

三、React:

React主要用於構建UI。你可以在React里傳遞多種類型的參數,如聲明代碼,幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。

React特性如下: 
    1.聲明式設計:React采用聲明范式,可以輕松描述應用。
    2.高效:React通過對DOM的模擬,最大限度地減少與DOM的交互。
    3.靈活:React可以與已知的庫或框架很好地配合。

優點: 1. 速度快:在UI渲染過程中,React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
      2. 跨瀏覽器兼容:虛擬DOM幫助我們解決了跨瀏覽器問題,它為我們提供了標准化的API,甚至在IE8中都是沒問題的。
      3. 模塊化:為你程序編寫獨立的模塊化UI組件,這樣當某個或某些組件出現問題是,可以方便地進行隔離。
      4. 單向數據流:Flux是一個用於在JavaScript應用中創建單向數據層的架構,它隨着React視圖庫的開發而被Facebook概念化。
      5. 同構、純粹的javascript:因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行,預渲染你的應用有助於搜索引擎優化。
      6. 兼容性好:比如使用RequireJS來加載和打包,而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

缺點: 1. React本身只是一個V而已,並不是一個完整的框架,所以如果是大型項目想要一套完整的框架的話,基本都需要加上ReactRouter和Flux才能寫大型應用。

----------------------------------------------------------

React vs. Angular vs. Vue

框架的問題:

它們是否足以構建可擴展的應用程序?是否很容易為每個框架找到開發人員?您是否了解此處列出的每個框架背后的核心概念?您是否分析過每個框架的性能,速度和學習曲線?有沒有工具可以使用這些庫開發應用程序?每個框架的歷史

React是一個用於構建Web應用程序UI組件的JavaScript庫。React由Facebook維護,許多領先的科技品牌在其開發環境中使用React。React被Facebook,Uber,Netflix,Twitter,Udemy,Paypal,Reddit,Tumblr,Walmart 等使用。來自Facebook的另一個受歡迎的企業React Native用於使用JavaScript和React構建本機移動應用程序。許多知名公司因其出色的特性和功能而轉向React開發。該 陣營與Vue.js 主題也在網絡上嗡嗡作響,為您提供了選擇最佳框架的充分見解。

Angular是一個由Google支持的基於TypeScript的JavaScript框架。這是一個非常受歡迎的前端開發框架。Angular是作為Angular 2或Angular發布的,它構成了AngularJS(框架的第一個版本)的重寫。

Angular開發在全球開發人員中廣泛流行,並被谷歌,福布斯,WhatsApp,Instagram,healthcare.gov和許多財富500強公司等大型組織使用。

現在,來到Vue,Vue.js是討論最多且發展最快的JavaScript框架之一。它由前谷歌員工Evan You創建,他在擔任Google員工時曾在Angular工作過。您可以認為它是成功的,因為它能夠使用HTML,CSS和JavaScript構建有吸引力的UI。Vue被阿里巴巴,GitLab,百度使用,並受到全球開發人員和設計師的贊賞。

人氣和市場趨勢

根據2017年Stackoverflow調查,Angular受到51.7%的開發者的喜愛,而React被66.9%的受訪開發者所接受。React和Angular在流行的前端框架類別中具有幾乎相同級別的用戶。Vue沒有在上述任何一個名單中占據一席之地,但有能力參加這場戰斗。

目前,Vue有108086顆星,React獲得106807 顆星,Angular獲得 38654顆星。

如果我們觀察上述統計數據,Vue.js似乎很受歡迎。盡管它是一個“單人秀”,但它有能力吸引開發人員的注意力,因為它結構精良且易於構建。

最重要的是,你不應該忘記Angular和React正被業界的大牌使用。Google在他們的項目中使用了Angular,Facebook,Airbnb,Dropbox,WhatsApp和Netflix等品牌正在其開發環境中使用React。

React比Angular更靈活,因為Angular是一個完整的框架,React是一組獨立,更快,不斷發展的庫,為此,你必須密切關注不再支持或維護的每個小模塊。

找到開發人員很容易嗎?

React涉及更多JavaScript,有時這也是人們面向Angular或Vue的原因。使用HTML更有意義,因為React具有不同的JSX語法--JavaScript XML。但是,它不需要在您的應用程序中使用JSX,但熟悉React的設置,環境和體系結構有點困難。

在這種情況下,Angular是一個非常好的選擇。您可以輕松找到Angular開發人員,它擁有一個完善的社區,擁有大量項目,更新,資源,並且具有可持續發展的未來。

JSX還是HTML?你更喜歡什么?

這是一場無休止的討論。Angular使用增強的HTML,而React更多地是關於JavaScript。請記住,所有這三個框架都是基於組件的。只要應用程序需要,您就可以重用組件。根據官方文檔,如果我們談論JSX,JSX既不是字符串也不是HTML。它允許開發人員創建React元素,它是JavaScript的語法擴展。

使用它有一個優勢,因為JavaScript比HTML更強大,而且它是一種維護良好且成熟的語言,適用於前端開發。Vue與兩個框架都不同。它分離了關注點,使開發人員能夠以有序的方式編寫樣式,腳本和其他內容。對於熟悉HTML的初學者,設計師和經驗豐富的開發人員來說,這聽起來不錯。

注意:您可以在Babel插件的幫助下在Vue中使用JSX。

框架?程序庫?有什么不同?

Angular是一個框架,因為它為您提供了使用完整設置構建應用程序的良好開端。您無需查看庫,路由解決方案和結構。你可以簡單地開始建設。另一方面,React和Vue比Angular更靈活,更通用。

使用React,您可以進行多個集成,因為您可以將庫與其他優秀工具配對,交換和集成。在這一點上,React開箱即用,因為它提供了無縫集成的靈活性,但是,這樣做有更多的機會出錯,它需要更多的依賴。

與這三個框架相比,Vue是最干凈的。它可以幫助您在保持代碼高效的同時實現內部依賴性和靈活性的完美平衡。它是一個非常簡單,直接且易於使用的JavaScript框架,旨在簡化Web開發。

您需要關注的其他重要事項

Angular涉及依賴注入,這是一個對象為另一個對象提供依賴關系的概念。這使代碼更清晰,更容易理解。另一方面,有一個MVC模式將項目分成三個不同的組件 - 模型,視圖和控制器。React沒有任何這樣的概念,它只用於構建應用程序的View,而Angular則基於MVC架構。

表現:哪個更好?

Virtual DOM模型在性能方面非常有用。React和Vue都有一個Virtual DOM。由於結構精良,Vue可提供出色的性能和內存分配。另一方面,React運作良好,Angular已經在競爭中領先。

性能取決於各種因素。這三個框架比其他JavaScript框架相對更快。您不應該考慮性能來得出結論,因為它主要依賴於應用程序的大小和代碼的優化。

本機應用程序開發?可能?

原生應用程序是為特定平台構建的。React擁有React Native,您可以使用它為iOS和Android開發本機應用程序。Angular的NativeScript已經被很多人用來開發本機應用程序,而Ionic框架在制作混合應用程序時廣受歡迎。

Vue的Weex平台正在不斷發展,目前似乎還沒有計划進一步發展,使其成為一個成熟的交叉開發平台。

哪個平台提供簡單的學習曲線?

Angular和React有自己的方法來做事情,其中,Vue相當容易。許多公司正在轉向Vue,因為它易於使用。在Angular或React中開發需要良好的JavaScript知識,您需要就第三方庫做出很多決策。

如果您的應用程序很大並且在Vue中涉及大量代碼,那么不僅編碼,而且調試和測試可能是一個真正的問題,因為它允許您以老式的JavaScript方式構建應用程序。

Angular提供了非常豐富且清晰的錯誤消息,實際上可以幫助開發人員解決問題。

單向數據流與雙向數據綁定

這是React和Angular之間的主要區別之一。雙向數據綁定是指UI字段綁定到動態建模的機制。當UI元素發生變化時,模型數據也會相應地更改。另一方面,單向數據流意味着只有一個單一的事實來源 - 模型。應用程序的數據以單一方向流動,只有模型才能更改應用程序的狀態。

單向數據流易於理解和確定,而雙向數據綁定由於其復雜性而難以理解和實現。

現在,如果我們在這種情況下考慮我們的框架,Angular使用雙向數據綁定,React用於單數據流,Vue支持兩者。在這里,重點是,Angular的雙向方法提供了有效的編碼結構,開發人員發現它易於使用。React提供了更好的概述和理解,因為數據是在一個方向上管理的。

Mircoapps和微服務的崛起

科技界目前正在接受mircoapps和微服務。React和Vue都可以靈活地選擇對應用程序很重要的東西。您只需將所需的庫添加到React和Vue中的源代碼中。Angular使用TypeScript,這就是為什么它更適合SPA而不是微服務。React和Vue都為開發微應用程序和微服務提供了更大的靈活性。

最后,我應該選擇什么?

如果您比其他功能更喜歡靈活性,請使用React。

如果您喜歡在TypeScript中編碼,請選擇Angular。

如果您是JavaScript愛好者,請使用React,因為它完全與JavaScript有關。

如果您喜歡干凈的代碼,請在您的應用程序中使用Vue。

Vue提供最簡單的學習曲線,是初學者的理想選擇。

如果要在應用程序中分離關注點,請使用Vue。

如果您喜歡面向對象的編程,Angular絕對是您的選擇。

Vue非常適合小型團隊和小型項目。如果您的應用程序似乎很大並且具有重要的未來擴展計划,請選擇React或Angular。

對於跨平台應用程序開發,React Native是一個理想的選擇,因為它提供了現代功能,您可以輕松地找到資源。另一方面,Angular需要良好的JavaScript知識才能構建大規模應用程序。

一個快速比較Angular vs. React vs. Vue

 

react和react native的區別是:

1、框架作用的平台不同;2、工作原理有差別;3、渲染周期不同;4、react native中所有元素都會被平台指定的react組件替換;5、宿主平台的API不同。

區別如下:

1、框架作用的平台不同

RN是由React衍生出來的,兩種框架都是用JSX開發語法,但是RN是用來開發真正原生渲染的iOS和Andriod移動應用的JS框架,而React是將瀏覽器作為渲染平台。

2、工作原理的差別

Virtual DOM是介於開發者描述的視圖與實際在頁面上渲染的視圖之間。在瀏覽器上如果想渲染出來可交互的用戶界面,開發者必須操作瀏覽器的文檔對象(document object model),Virtual DOM的出現,就是為了節省這部分操作所消耗的性能。

但是Virtual DOM的巨大潛力,是在於這個抽象層,可以帶來很多可能性。

React Native的工作原理,就是調用Objective-C的API去渲染iOS組件,調用Java API去渲染Android組件,而不是渲染到DOM上。橋接使得React可調用宿主平台開放的UI組件,React組件通過render方法返回了描述界面的標記代碼。如果是web平台,React最終把標記代碼解析成瀏覽器的DOM;而在React Native中,標記代碼會解析成特定平台的組件,例如<View>會表現成iOS平台上的UIView。

3、渲染周期

React的渲染周期開始於react組件掛載到DOM之后,接着React進入渲染周期並根據需要渲染組件。在渲染階段,React將開發者在return中返回的HTML標記直接按需渲染到頁面上。

React Native生命周期與React基本相同,在渲染上因為React Native依賴於橋接,並不在UI主線程運行,它可以在不影響用戶體驗的前提下執行這些異步調用。

4、創建組件

當編寫Web環境的React的時候,視圖最終需要渲染成普通的HTML元素;而在React Native中,所有元素都會被平台指定的React組件替換,例如在iOS中,<View>組件被渲染成UIView,而在Android平台,會被渲染成View。

UI元素均為React的組件,而不是像<div>這樣基礎的html元素,因此在使用每一個組件的時候,都需要顯式的導入,例如:

1

import { DatePickerIOS } from 'react-native';

5、原生的樣式

在Web中,使用CSS樣式為React組件添加樣式已經是開發過程中不可獲取的一部分了。React通常不影響我們編寫CSS的方式,並且它確實讓樣式的動態創建更加容易(通過state和props),除此之外,React基本上不關心我們如何處理樣式的。

非Web平台上有大量的方法來處理布局和樣式,我們使用React Native時,只需要用一種標准的方法來處理樣式,React和宿主平台之間的橋接包含了一個縮減版CSS子集的實現,這個CSS子集主要通過flexbox進行布局,做到了盡量簡化,而不是去實現所有的CSS規則。有別於Web平台,CSS的支持程度因瀏覽器而不同,React Native則做到了樣式規則的一致。

6、宿主平台API

使用Web 環境的React 與React Native 最大的不同,在於宿主平台的API。

在Web 中,我們通常要處理采納標准的不一致和碎片化所引起的問題,並且大多數瀏覽器只支持部分核心的特性。然而在React Native 中,平台特定的API 在提供優秀原生的用戶體驗方面發揮了巨大的作用。當然,要考慮的方面還有很多。API 囊括了許多功能,從數據存儲到地理服務,以及操控硬件設備(如攝像頭)等。非常規平台上的API 會更有趣,例如,React Native 和虛擬現實頭盔之間的API 會是什么樣的呢?

默認情況下,iOS 和Android 版本的React Native 支持許多常用的特性,甚至可以支持任何異步的本地API。React Native 讓宿主平台API 的使用變得更加簡單和直觀,你可以在其中自由地試驗。同時,務必思考一下怎樣做才符合目標平台的體驗,並在心里設計好交互過程。毋庸置疑,React Native 的橋接不可能暴露宿主平台全部的API。

如果你需要使用一個未支持的特性,完全可以自己動手添加到React Native 中。另外,如果其他人已經集成,那就更好了,所以應該及時查看社區中的實現。值得注意的是,使用平台API 也會對代碼復用有幫助。同時,實現平台特定功能的React組件也是平台特定的。

隔離和封裝這些組件將會給你的應用帶來更大的靈活性。當然,這對你開發Web 應用同樣奏效,如果你想共享React 和React Native 的代碼,請記住像DOM 這樣的API 在React Native 中並不存在。

react native和react的區別

原理略有不同:

React和React Native的原理是相同的,都是由js實現的虛擬dom來驅動界面view層渲染。只不過React是驅動html dom渲染; React Native是驅動android/ios原生組件渲染。其實在React Native推出之前,就已經存在這種使用js驅動app原生組件的技術了,比如Native Script。

編程思路會有所不同:

react 直接渲染dom,而react native生成id,用bridge(最新用c++實現了)變成一個表,等待 native 去調用,寫react可以用前端知識直接上手,react native雖然也可以,但是深入下去沒有native知識支持很難。

(1),React Js的目的是為了使前端的V層更具組件化,能更好的復用,它能夠使用簡單的html標簽創建更多的自定義組件標簽,內部綁定事件,同時可以讓你從操作dom中解脫出來,只需要操作數據就會改變相應的dom。

(2),React Native的目的是希望我們能夠使用前端的技術棧就可以創建出能夠在不同平台運行的一個框架。可以創建出在移動端運行的app,但是性能可能比原聲app差一點。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM