[[205128]]

React

React 和 Vue 有許多相似之處，它們都有：

• 使用 Virtual DOM
• 提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。
• 將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。

由于有著眾多的相似處，我們會用更多的時間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時也兼顧了平衡的考量。我們需要承認(rèn) React 比 Vue 更好的地方，比如更豐富的生態(tài)系統(tǒng)。

相似之處

React與Vue存在很多相似之處，例如他們都是JavaScript的UI框架，專注于創(chuàng)造前端的富應(yīng)用。不同于早期的JavaScript框架“功能齊全”，Reat與Vue只有框架的骨架，其他的功能如路由、狀態(tài)管理等是框架分離的組件。

Virtual DOM

Vue.js(2.0版本)與React的其中***一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM，DOM樹的虛擬表現(xiàn)。它的誕生是基于這么一個概念：改變真實的DOM狀態(tài)遠(yuǎn)比改變一個JavaScript對象的花銷要大得多。

簡單來說，Virtual DOM是一個映射真實DOM的JavaScript對象，如果需要改變?nèi)魏卧氐臓顟B(tài)，那么是先在Virtual DOM上進(jìn)行改變，而不是直接改變真實的DOM。當(dāng)有變化產(chǎn)生時，一個新的Virtual DOM對象會被創(chuàng)建并計算新舊Virtual DOM之間的差別。之后這些差別會應(yīng)用在真實的DOM上。

例子如下，我們可以看看下面這個列表在HTML中的代碼是如何寫的：

而在JavaScript中，我們可以用對象簡單地創(chuàng)造一個針對上面例子的映射：

真實的Virtual DOM會比上面的例子更復(fù)雜，但它本質(zhì)上是一個嵌套著數(shù)組的原生對象。當(dāng)新一項被加進(jìn)去這個JavaScript對象時，一個函數(shù)會計算新舊Virtual DOM之間的差異并反應(yīng)在真實的DOM上。計算差異的算法是高性能框架的秘密所在，React和Vue在實現(xiàn)上有點不同。

Vue宣稱可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中，會跟蹤每一個組件的依賴關(guān)系，不需要重新渲染整個組件樹。

而對于React而言，每當(dāng)應(yīng)用的狀態(tài)被改變時，全部子組件都會重新渲染。當(dāng)然，這可以通過shouldComponentUpdate這個生命周期方法來進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。

組件化

React與Vue都鼓勵組件化應(yīng)用。這本質(zhì)上說，是建議你將你的應(yīng)用分拆成一個個功能明確的模塊，每個模塊之間可以通過合適的方式互相聯(lián)系。在Vue中，如果你遵守一定的規(guī)則，你可以使用單文件組件.

正如上面你看到的例子中，HTML, JavaScript和CSS都寫在一個文件之中，你不再需要在.vue組件文件中引入CSS。

而在React語法中，JavaScript與JSX被寫入同一個組件文件中。

Props

在上面兩個例子中，我們可以看到React和Vue都有'props'的概念，這是properties的簡寫。props在組件中是一個特殊的屬性，允許父組件往子組件傳送數(shù)據(jù)。

上面的JSX庫組中，index, key, details, orders 與 addToOrder都是props，數(shù)據(jù)會被下傳到子組件PastaItem中去。

在React中，這是必須的，它依賴一個“單一數(shù)據(jù)源”作為它的“狀態(tài)”。而在Vue中，props略有不同。它們一樣是在組件中被定義，但Vue依賴于模板語法，你可以通過模板的循環(huán)函數(shù)更高效地展示傳入的數(shù)據(jù)。

構(gòu)建工具

React和Vue都有自己的構(gòu)建工具，你可以使用它快速搭建開發(fā)環(huán)境。React可以使用Create React App (CRA)，而Vue對應(yīng)的則是vue-cli。兩個工具都能讓你得到一個根據(jù)***實踐設(shè)置的項目模板。

由于CRA有很多選項，使用起來會稍微麻煩一點。這個工具會逼迫你使用Webpack和Babel。而vue-cli則有模板列表可選，能按需創(chuàng)造不同模板，使用起來更靈活一點。

事實上說，兩個工具都非常好用，都能為你建立一個好環(huán)境。而且如果可以不配置Webpack的話，我和Jeff認(rèn)為這是天大的好事。

Chrome 開發(fā)工具

React和Vue都有很好的Chrome擴展工具去幫助你找出bug。它們會檢查你的應(yīng)用，讓你看到Vue或者React中的變化。你也可以看到應(yīng)用中的狀態(tài)，并實時看到更新。

React的開發(fā)工具: https://cdn.deliciousbrains.com/content/uploads/2017/06/15151112/react-devtools.mp4

Vue的開發(fā)工具: https://cdn.deliciousbrains.com/content/uploads/2017/06/15151111/vue-devtools.mp4

主要區(qū)別

Vue與React***一個相似但略有不同之處是它們配套框架的處理方法。相同之處在于，兩個框架都專注于UI層，其他的功能如路由、狀態(tài)管理等都交由同伴框架進(jìn)行處理。

而不同之處是在于它們?nèi)绾侮P(guān)聯(lián)它們各自的配套框架。Vue的核心團(tuán)隊維護(hù)著vue-router和vuex，它們都是作為官方推薦的存在。而React的react-router和react-redux則是由社區(qū)成員維護(hù)，它們都不是官方維護(hù)的。

模板 vs JSX

React與Vue***的不同是模板的編寫。Vue鼓勵你去寫近似常規(guī)HTML的模板。寫起來很接近標(biāo)準(zhǔn)HTML元素，只是多了一些屬性。

這些屬性也可以被使用在單文件組件中，盡管它需要在在構(gòu)建時將組件轉(zhuǎn)換為合法的JavaScript和HTML。

Vue鼓勵你去使用HTML模板去進(jìn)行渲染，使用相似于Angular風(fēng)格的方法去輸出動態(tài)的內(nèi)容。因此，通過把原有的模板整合成新的Vue模板，Vue很容易提供舊的應(yīng)用的升級。這也讓新來者很容易適應(yīng)它的語法。

React推薦你所有的模板通用JavaScript的語法擴展——JSX書寫，不過這對于傳統(tǒng)的前端開發(fā)人員需要相應(yīng)的學(xué)習(xí)。同樣的代碼，用JSX書寫的例子如下：

React/JSX乍看之下，覺得非常啰嗦，但使用JavaScript而不是模板來開發(fā)，賦予了開發(fā)者許多編程能力。

狀態(tài)管理 vs 對象屬性

如果你對React熟悉，你就會知道應(yīng)用中的狀態(tài)是（React）關(guān)鍵的概念。也有一些配套框架被設(shè)計為管理一個大的state對象，如Redux。此外，state對象在React應(yīng)用中是不可變的，意味著它不能被直接改變，在React中你需要使用setState()方法去更新狀態(tài)。

在Vue中，state對象并不是必須的，數(shù)據(jù)由data屬性在Vue對象中進(jìn)行管理。

而在Vue中，則不需要使用如setState()之類的方法去改變它的狀態(tài)，在Vue對象中，data參數(shù)就是應(yīng)用中數(shù)據(jù)的保存者。

不過惡心的是React出了一個霸王條款：Facebook拒修改React開源許可

Angularjs

Vue 的一些語法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因為 AngularJS 是 Vue 早期開發(fā)的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經(jīng)得到解決。

Angular

1，MVVM（Model）(View)(View-model)
2，模塊化（Module）控制器（Contoller）依賴注入：
3，雙向數(shù)據(jù)綁定：界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。
4，指令(ng-click ng-model ng-href ng-src ng-if...)
5，服務(wù)Service($compile $filter $interval $timeout $http...)
其中雙向數(shù)據(jù)綁定的實現(xiàn)使用了$scope變量的臟值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，內(nèi)部調(diào)用的都是digest，當(dāng)然也可以直接調(diào)用$scope.$digest進(jìn)行臟檢查。值得注意的是當(dāng)數(shù)據(jù)變化十分頻繁時，臟檢測對瀏覽器性能的消耗將會很大，官方注明的***檢測臟值為2000個數(shù)據(jù)。

Vue

vue.js官網(wǎng)：是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

（1）模塊化，目前最熱的方式是在項目中直接使用ES6的模塊化，結(jié)合Webpack進(jìn)行項目打包
（2）組件化，創(chuàng)造單個component后綴為.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)
（3）路由，
vue非常小巧，壓縮后min源碼為72.9kb，gzip壓縮后只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router)，Ajax插件(vue-resource)等

下面從幾個方面來比較一下Vue.js和Angular.js的區(qū)別

TypeScript

Angular 事實上必須用 TypeScript 來開發(fā)，因為它的文檔和學(xué)習(xí)資源幾乎全部是面向 TS 的。TS 有很多顯而易見的好處 —— 靜態(tài)類型檢查在大規(guī)模的應(yīng)用中非常有用，同時對于 Java 和 C# 背景的開發(fā)者也是非常提升開發(fā)效率的。
然而，并不是所有人都想用 TS —— 在中小型規(guī)模的項目中，引入 TS 可能并不會帶來太多明顯的優(yōu)勢。在這些情況下，用 Vue 會是更好的選擇，因為在不用 TS 的情況下使用 Angular 會很有挑戰(zhàn)性。
***，雖然 Vue 和 TS 的整合可能不如 Angular 那么深入，我們也提供了官方的 類型聲明 和 組件裝飾器，并且知道有大量用戶在生產(chǎn)環(huán)境中使用 Vue + TS 的組合。我們也和微軟的 TS / VSCode 團(tuán)隊進(jìn)行著積極的合作，目標(biāo)是為 Vue + TS 用戶提供更好的類型檢查和 IDE 開發(fā)體驗。

大小和性能

在性能方面，這兩個框架都非常的快，我們也沒有足夠的實際應(yīng)用數(shù)據(jù)來下一個結(jié)論。如果你一定想看些數(shù)據(jù)的話，你可以參考這個第三方跑分。單就這個跑分來看，Vue 似乎比 Angular 要更快一些。
在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技術(shù)后使得最終的代碼體積減小了許多。但即使如此，一個包含了 Vuex + Vue Router 的 Vue 項目 (30kb gzipped) 相比使用了這些優(yōu)化的 angular-cli 生成的默認(rèn)項目尺寸 (~130kb) 還是要小的多。
靈活性

Vue 相比于 Angular 更加靈活，Vue 官方提供了構(gòu)建工具來協(xié)助你構(gòu)建項目，但它并不限制你去如何組織你的應(yīng)用代碼。有人可能喜歡有嚴(yán)格的代碼組織規(guī)范，但也有開發(fā)者喜歡更靈活自由的方式。
學(xué)習(xí)曲線

要學(xué)習(xí) Vue，你只需要有良好的 HTML 和 JavaScript 基礎(chǔ)。有了這些基本的技能，你就可以非?？焖俚赝ㄟ^閱讀 指南 投入開發(fā)。
Angular 的學(xué)習(xí)曲線是非常陡峭的 —— 作為一個框架，它的 API 面積比起 Vue 要大得多，你也因此需要理解更多的概念才能開始有效率地工作。當(dāng)然，Angular 本身的復(fù)雜度是因為它的設(shè)計目標(biāo)就是只針對大型的復(fù)雜應(yīng)用；但不可否認(rèn)的是，這也使得它對于經(jīng)驗不甚豐富的開發(fā)者相當(dāng)?shù)牟挥押谩?/p>

不過就算有這么多好處，但是相比Angular2，Vue還是有很多的不足：
作者：曹之忽
鏈接：https://www.zhihu.com/question/40975678/answer/133505411
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

1. Angular2原生Form支持： Angular2原生的Form模塊功能相當(dāng)強大。除了雙向綁定之類的基本功能，還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點Vue只有v-model和第三方庫。對于后臺之類的重表單應(yīng)用，還是Ng2有優(yōu)勢。
2. 依賴注入無論你喜不喜歡DI，這就是Angular2的強大功能之一。有DI可以在不改變代碼結(jié)構(gòu)的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實現(xiàn)，而共用相同的template和directive）。Vue則需要程序員自己規(guī)劃代碼組織，用來支持共享組件。DI也可以用于類似module local state的功能。比如，一個視頻播放控件有幾個子組件完成，子組件需要分享一個狀態(tài)。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。
3. 對標(biāo)準(zhǔn)向后兼容Angular2在一些細(xì)節(jié)上對標(biāo)準(zhǔn)有更好的支持。比如 list differ 算法中 Angular2 可以支持實現(xiàn)了Symbol.iterator的對象，而Vue只能支持Array。對Observable和Promise，Angular2在應(yīng)用的各個地方，甚至模板級別都有支持(async pipe)。而Vue需要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實現(xiàn)可以選擇，而Vue目前還沒有。
4. 測試Angular2一開始就設(shè)計好了如何對組件進(jìn)行測試，而Vue組件雖然也很好寫測試，但是沒有官方推薦的唯一標(biāo)準(zhǔn)（當(dāng)然，對視圖是否需要測試還有待探討）。除此以外，Angular2還有一些小功能比如檢驗?zāi)０宓念愋桶踩?，模板里能在編譯器保證沒有引用model未定義的變量），不過AoT本身似乎還沒有穩(wěn)定，所以不能算優(yōu)勢。對TS的支持也是Angular好，當(dāng)然前提是你喜歡TS。

Ember

Ember 是一個全能框架。它提供了大量的約定，一旦你熟悉了它們，開發(fā)會變得很高效。不過，這也意味著學(xué)習(xí)曲線較高，而且并不靈活。這意味著在框架和庫 (加上一系列松散耦合的工具) 之間做權(quán)衡選擇。后者會更自由，但是也要求你做更多架構(gòu)上的決定。
也就是說，我們***比較的是 Vue 內(nèi)核和 Ember 的模板與數(shù)據(jù)模型層：

• Vue 在普通 JavaScript 對象上建立響應(yīng)，提供自動化的計算屬性。在 Ember 中需要將所有東西放在 Ember 對象內(nèi)，并且手工為計算屬性聲明依賴。
• Vue 的模板語法可以用全功能的 JavaScript 表達(dá)式，而 Handlebars 的語法和幫助函數(shù)相比來說非常受限。
• 在性能上，Vue 比 Ember 好很多，即使是 Ember 2.x 的*** Glimmer 引擎。Vue 能夠自動批量更新，而Ember 在關(guān)鍵性能場景時需要手動管理。

Knockout

Knockout 是 MVVM 領(lǐng)域內(nèi)的先驅(qū)，并且追蹤依賴。它的響應(yīng)系統(tǒng)和 Vue 也很相似。它在瀏覽器支持以及其他方面的表現(xiàn)也是讓人印象深刻的。它***能支持到 IE6，而 Vue ***只能支持到 IE9。
隨著時間的推移，Knockout 的發(fā)展已有所放緩，并且略顯有點老舊了。比如，它的組件系統(tǒng)缺少完備的生命周期事件方法，盡管這些在現(xiàn)在是非常常見的。以及相比于 Vue 調(diào)用子組件的接口它的方法顯得有點笨重。
如果你有興趣研究，你還會發(fā)現(xiàn)二者在接口設(shè)計的理念上是不同的。這可以通過各自創(chuàng)建的 simple Todo List 體現(xiàn)出來?；蛟S有點主觀，但是很多人認(rèn)為 Vue 的 API 接口更簡單結(jié)構(gòu)更優(yōu)雅。

Polymer

Polymer 是另一個由谷歌贊助的項目，事實上也是 Vue 的一個靈感來源。Vue 的組件可以粗略的類比于 Polymer 的自定義元素，并且兩者具有相似的開發(fā)風(fēng)格。***的不同之處在于，Polymer 是基于***版的 Web Components 標(biāo)準(zhǔn)之上，并且需要重量級的 polyfills 來幫助工作 (性能下降)，瀏覽器本身并不支持這些功能。相比而言，Vue 在支持到 IE9 的情況下并不需要依賴 polyfills 來工作。
在 Polymer 1.0 版本中，為了彌補性能，團(tuán)隊非常有限的使用數(shù)據(jù)綁定系統(tǒng)。例如，在 Polymer 中唯一支持的表達(dá)式只有布爾值否定和單一的方法調(diào)用，它的 computed 方法的實現(xiàn)也并不是很靈活。
Polymer 自定義的元素是用 HTML 文件來創(chuàng)建的，這會限制使用 JavaScript/CSS (和被現(xiàn)代瀏覽器普遍支持的語言特性)。相比之下，Vue 的單文件組件允許你非常容易的使用 ES2015 和你想用的 CSS 預(yù)編譯處理器。
在部署生產(chǎn)環(huán)境時，Polymer 建議使用 HTML Imports 加載所有資源。而這要求服務(wù)器和客戶端都支持 Http 2.0 協(xié)議，并且瀏覽器實現(xiàn)了此標(biāo)準(zhǔn)。這是否可行就取決于你的目標(biāo)用戶和部署環(huán)境了。如果狀況不佳，你必須用 Vulcanizer 工具來打包 Polymer 元素。而在這方面，Vue 可以結(jié)合異步組件的特性和 Webpack 的代碼分割特性來實現(xiàn)懶加載 (lazy-loaded)。這同時確保了對舊瀏覽器的兼容且又能更快加載。
而 Vue 和 Web Component 標(biāo)準(zhǔn)進(jìn)行深層次的整合也是完全可行的，比如使用 Custom Elements、Shadow DOM 的樣式封裝。然而在我們做出嚴(yán)肅的實現(xiàn)承諾之前，我們目前仍在等待相關(guān)標(biāo)準(zhǔn)成熟，進(jìn)而再廣泛應(yīng)用于主流的瀏覽器中。

Riot

Riot 2.0 提供了一個類似于基于組件的開發(fā)模型 (在 Riot 中稱之為 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在設(shè)計理念上可能有許多相似處。盡管相比 Riot ，Vue 要顯得重一點，Vue 還是有很多顯著優(yōu)勢的：

• 過渡效果系統(tǒng)。Riot 現(xiàn)在還沒有提供。
• 功能更加強大的路由機制，Riot 的路由功能的 API 是極少的。
• 更好的性能。Riot 使用了 遍歷 DOM 樹 而不是虛擬 DOM，但實際上用的還是臟檢查機制，因此和 AngularJS患有相同的性能問題。
• 更多成熟工具的支持。Vue 提供官方支持 webpack 和 Browserify，而 Riot 是依靠社區(qū)來建立集成系統(tǒng)。

作者：code-xzh

原文鏈接