1. 程式人生 > >vue react angular比較

vue react angular比較

VUE

Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與單檔案元件 Vue 生態系統支援的庫結合使用時,Vue 也完全能夠為複雜的單頁應用程式提供驅動。Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式的將資料渲染進 DOM

Vue.js是當下很火的一個JavaScript MVVMModel-View-ViewModel),它是以資料驅動和元件化的思想構建的。學習

Vue.js時請先拋開jQuery手動操作DOM的思維,因為Vue.js是資料驅動的,你無需手動操作DOM。它通過一些特殊的HTML語法,將DOM和資料繫結起來。一旦你建立了繫結,DOM將和資料保持同步,每當變更了資料,DOM也會相應地更新。

當然了,在使用Vue.js時,你也可以結合其他庫一起使用,比如jQuery。

使用Vue的過程就是定義MVVM各個組成部分的過程。

1)定義View

2)定義Model

3建立一個Vue例項或"ViewModel",它用於連線View和Model在建立Vue例項時,需要傳入一個選項物件,選項物件可以包含資料、掛載元素、方法、生命週期鉤子等等。

 

Vue特點

1、輕量級的框架

2、雙向資料繫結  比如你改變一個輸入框 Input 標籤的值,會自動同步更新到頁面上其他繫結該輸入框的元件的值

3、元件化  頁面上小到一個按鈕都可以是一個單獨的檔案.vue,這些小元件直接可以像樂高積木一樣通過互相引用而組裝起來

4、單向響應的資料流

5、指令

6、外掛化

React

React特點

1.宣告式設計 React採用聲明範式,可以輕鬆描述應用。

2.高效 React通過對DOM的模擬,最大限度地減少與DOM的互動。

3.靈活 

React可以與已知的庫或框架很好地配合。

4.JSX  JSX 是 JavaScript 語法的擴充套件。React 開發不一定使用 JSX ,但我們建議使用它。

5.元件  通過 React 構建元件,使得程式碼更加容易得到複用,能夠很好的應用在大專案的開發中。

6.單向響應的資料流  React 實現了單向響應的資料流,從而減少了重複程式碼,這也是它為什麼比傳統資料繫結更簡單。

React Vue 有許多相似之處

1、使用 Virtual DOM(虛擬 DOM通過 diff 比對,找到變更節點,重新渲染

2、提供了響應式(Reactive)和元件化(Composable)的檢視元件。

3、將注意力集中保持在核心庫,而將其他功能如路由和全域性狀態管理交給相關的庫。

4、使用Prop傳遞資料,prop 是單向繫結的當父元件的屬性變化時,將傳導給子元件,但是不會反過來。子元件不應該直接改變prop

5、都提供了路由、狀態管理器(react對應的redux,vue對應vuex)等。

6、都提供合理的鉤子函式,可以讓開發者定製化地去處理需求。

7、在元件開發中都支援mixins的特性。

VUEreact差異

效能

1React 和 Vue 在大部分常見場景下都能提供近似的效能。通常 Vue 會有少量優勢,因為 Vue 的 Virtual DOM 實現相對更為輕量一些。

2 React 應用中,當某個元件的狀態發生變化時,它會以該元件為根,重新渲染整個元件子樹。如要避免不必要的子元件的重渲染相應的處理機制PureComponent Vue 應用中,元件的依賴是在渲染過程中自動追蹤的,所以系統能精確知曉哪個元件確實需要被重渲染

3 Vue 和 React 開發大多數應用的速度都是足夠快的。假如你要開發一個對效能要求比較高的資料視覺化或者動畫的應用時,你需要了解到下面這點:在開發中,Vue 每秒最高處理 10 幀,而 React 每秒最高處理不到 1 幀。

HTML&CSS

1、 React 中,一切都是 JavaScriptHTML 可以用 JSX 來表達。Vue 的整體思想是擁抱經典的 Web 技術(採用template方式,比如v-on 的各種修飾符 JSX 中實現對應的功能會需要多得多的程式碼)事實上 Vue 也提供了render渲染函式 ,甚至支援 JSX

2、 React 中現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理(有其優越性具體不詳說通過依賴引入css模組 Vue 可以讓你在每個單檔案元件中完全訪問 CSS,方便的規定css作用域,也可引入css模組。



其他

1、兩者另一個重要差異是,Vue 的路由庫和狀態管理庫都是由官方維護支援且與核心庫同步更新的React 則是選擇把這些問題交給社群維護,因此建立了一個更分散的生態系統。但相對的,React 的生態系統相比 Vue 更加繁榮。

2、從兩者提供的路由、狀態管理器等向上擴充套件來看Vue React做得都比較完善,向下擴充套件來看Vue就類似於 jQuery。你只要把如下標籤放到頁面就可以執行:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

3、本地渲染ReactNative 能使你用相同的元件模型編寫有本地渲染能力的 APP(iOS 和 Android)。能同時跨多平臺開發,對開發者是非常棒的。相應地,Vue 和 Weex 會進行官方合作,Weex 是阿里的跨平臺使用者介面開發框架,Weex 的 JavaScript 框架執行時用的就是 Vue。這意味著 Weex 的幫助下,你使用 Vue 語法開發的元件不僅僅可以執行在瀏覽器端,還能被用於開發 iOS 和 Android 上的原生應用當然在現在,Weex 還在積極發展,成熟度也不能和 ReactNative 相抗衡。

4、Vue.js在模板中提供了指令,過濾器等,可以非常方便,快捷地操作DOM。

Angular 

Angular1 是比較新的技術,版本 1.0 是在 2012 年釋出的。

AngularJS2 釋出於2016年9月份,它是基於ES6來開發的。

Angular2.x與Angular1.x 的區別Angular2.x與Angular1.x 的區別類似 Java 和 JavaScript 或者說是雷鋒與雷峰塔的區別

AngularJS2組成

1、模組 (Modules)

2、元件 (Components)

3、模板 (Templates)

4、元資料 (Metadata)

5、資料繫結 (Data Binding)

6、指令 (Directives)

7、服務 (Services)

8、依賴注入 (Dependency Injection)

VUEangular1比較

Vue 的一些語法和 Angular 的很相似(例如 v-if vs ng-if)。因為 Angular 是 Vue 早期開發的靈感來源然而,Angular 中存在的許多問題,在 Vue 中已經得到解決。效能上,Angular 2 和 Vue 用相似的設計解決了一些 Angular 1 中存在的問題

VUEangular2比較

1、Angular 事實上必須用 TypeScript TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態型別和基於類的面向物件程式設計)來開發,因為它的文件和學習資源幾乎全部是面向 TS 的。TS 有很多顯而易見的好處 —— 靜態型別檢查在大規模的應用中非常有用,同時對於 Java 和 C# 背景的開發者也是非常提升開發效率的。

2、在大小和效能上,在效能方面,這兩個框架都非常的快,我們也沒有足夠的實際應用資料來下一個結論。如果你一定想看些資料的話,你可以參考這個第三方跑分。單就這個跑分來看,Vue 似乎比 Angular 要更快一些在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技術後使得最終的程式碼體積減小了許多。但即使如此,一個包含了 vuex + vue-router 的 Vue 專案 (30kb gzipped) 相比使用了這些優化的 Angular CLI 生成的預設專案尺寸 (~130kb) 還是要小的多。

3、靈活性Vue 相比於 Angular 更加靈活,Vue 官方提供了構建工具來協助你構建專案,但它並不限制你去如何組織你的應用程式碼。有人可能喜歡有嚴格的程式碼組織規範,但也有開發者喜歡更靈活自由的方式。

4、學習曲線。要學習 Vue,你只需要有良好的 HTML 和 JavaScript 基礎。Angular 的學習曲線是非常陡峭的 —— 作為一個框架,它的 API 面積比起 Vue 要大得多,你也因此需要理解更多的概念才能開始有效率地工作。當然,Angular 本身的複雜度是因為它的設計目標就是隻針對大型的複雜應用;但不可否認的是,這也使得它對於經驗不甚豐富的開發者相當的不友好。