React
React 和 Vue 有許多相似之處震糖，它們都有：
使用 Virtual DOM
提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件女揭。
將注意力集中保持在核心庫蚤假，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。

由于有著眾多的相似處吧兔，我們會用更多的時間在這一塊進行比較勤哗。這里我們不只保證技術(shù)內(nèi)容的準確性，同時也兼顧了平衡的考量掩驱。我們需要承認 react 比 Vue 更好的地方，比如更豐富的生態(tài)系統(tǒng)。
React 社區(qū)為我們準確進行平衡的考量提供了非常積極的幫助欧穴，特別感謝來自 React 團隊的 Dan Abramov 民逼。他非常慷慨的花費時間來貢獻專業(yè)知識來幫助我們完善這篇文檔涮帘。
性能
React 和 Vue 在大部分常見場景下都能提供近似的性能拼苍。通常 Vue 會有少量優(yōu)勢，因為 Vue 的 Virtual DOM 實現(xiàn)相對更為輕量一些调缨。如果你對數(shù)據(jù)感興趣疮鲫，可以參考這個專門測試渲染和更新性能的第三方跑分。注意這個跑分并不包含針對大量復(fù)雜組件樹的情況弦叶，因此只建議作為參考俊犯。
優(yōu)化
在 React 應(yīng)用中，當某個組件的狀態(tài)發(fā)生變化時伤哺，它會以該組件為根燕侠，重新渲染整個組件子樹。
如要避免不必要的子組件的重渲染立莉，你需要在所有可能的地方使用 PureComponent
绢彤，或是手動實現(xiàn) shouldComponentUpdate
方法。同時你可能會需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來使得你的組件更容易被優(yōu)化蜓耻。
然而茫舶，使用 PureComponent
和 shouldComponentUpdate
時，需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的刹淌。如果不符合這個情況饶氏，那么此類優(yōu)化就會導致難以察覺的渲染結(jié)果不一致。這使得 React 中的組件優(yōu)化伴隨著相當?shù)男闹秦摀?br> 在 Vue 應(yīng)用中芦鳍，組件的依賴是在渲染過程中自動追蹤的嚷往，所以系統(tǒng)能精確知曉哪個組件確實需要被重渲染。你可以理解為每一個組件都已經(jīng)自動獲得了 shouldComponentUpdate
柠衅，并且沒有上述的子樹問題限制皮仁。
Vue 的這個特點使得開發(fā)者不再需要考慮此類優(yōu)化，從而能夠更好地專注于應(yīng)用本身菲宴。
HTML & CSS
在 React 中贷祈，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達喝峦，現(xiàn)在的潮流也越來越多地將 CSS 也納入到 javascript 中來處理势誊。這類方案有其優(yōu)點，但也存在一些不是每個開發(fā)者都能接受的取舍谣蠢。
Vue 的整體思想是擁抱經(jīng)典的 Web 技術(shù)粟耻，并在其上進行擴展查近。我們下面會詳細分析一下。
JSX vs Templates
在 React 中挤忙，所有的組件的渲染功能都依靠 JSX霜威。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。
JSX 說是手寫的渲染函數(shù)有下面這些優(yōu)勢：
你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面册烈。比如你可以使用臨時變量戈泼、js 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等赏僧。

開發(fā)工具對 JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進的（比如大猛，linting、類型檢查淀零、編輯器的自動完成）挽绩。

事實上 Vue 也提供了渲染函數(shù) ，甚至支持 JSX窑滞。然而琼牧，我們默認推薦的還是模板。任何合乎規(guī)范的 HTML 都是合法的 Vue 模板哀卫，這也帶來了一些特有的優(yōu)勢：
對于很多習慣了 HTML 的開發(fā)者來說巨坊，模板比起 JSX 讀寫起來更自然。這里當然有主觀偏好的成分此改，但如果這種區(qū)別會導致開發(fā)效率的提升趾撵，那么它就有客觀的價值存在。

基于 HTML 的模板使得將已有的應(yīng)用逐步遷移到 Vue 更為容易共啃。

這也使得設(shè)計師和新人開發(fā)者更容易理解和參與到項目中占调。

你甚至可以使用其他模板預(yù)處理器，比如 Pug 來書寫 Vue 的模板移剪。

有些開發(fā)者認為模板意味著需要學習額外的 DSL (Domain-Specific Language, 領(lǐng)域特定語言）才能進行開發(fā) —— 我們認為這種區(qū)別是比較膚淺的究珊。首先，JSX 并不是免費的 —— 它是基于 JS 之上的一套額外語法纵苛，因此也有它自己的學習成本剿涮。同時，正如同熟悉 JS 的人學習 JSX 會很容易一樣攻人，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的取试。最后，DSL 的存在使得我們可以讓開發(fā)者用更少的代碼做更多的事怀吻，比如 v-on
的各種修飾符瞬浓，在 JSX 中實現(xiàn)對應(yīng)的功能會需要多得多的代碼。
更抽象一點來看蓬坡，我們可以把組件區(qū)分為兩類：一類是偏視圖表現(xiàn)的 (presentational)猿棉，一類則是偏邏輯的 (logical)磅叛。我們推薦在前者中使用模板，在后者中使用 JSX 或渲染函數(shù)铺根。這兩類組件的比例會根據(jù)應(yīng)用類型的不同有所變化宪躯，但整體來說我們發(fā)現(xiàn)表現(xiàn)類的組件遠遠多于邏輯類組件。
CSS 的組件作用域
除非你把組件分布在多個文件上 (例如 CSS Modules)位迂，要不在 React 中作用域內(nèi)的 CSS 就會產(chǎn)生警告。非常簡單的 CSS 還可以工作详瑞，但是稍微復(fù)雜點的掂林，比如懸停狀態(tài)、媒體查詢坝橡、偽類選擇符等要么通過沉重的依賴來重做要么就直接不能用泻帮。
而 Vue 可以讓你在每個單文件組件中完全訪問 CSS。

<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>

這個可選 scoped
屬性會自動添加一個唯一的屬性（比如 data-v-21e5b78
）為組件內(nèi) CSS 指定作用域计寇，編譯的時候 .list-Container:hover
會被編譯成類似 .list-container[data-v-21e5b78]:hover
锣杂。
如果你已經(jīng)熟悉 CSS Modules，Vue 單文件組件也有 first-class 支持它番宁。
最后元莫，就像 HTML 一樣，你可以選擇自己偏愛的 CSS 預(yù)處理器（或后處理器）編寫 CSS蝶押，這些生態(tài)系統(tǒng)允許您利用現(xiàn)有的庫踱蠢。這可以讓你圍繞設(shè)計為中心展開工作，比如您的構(gòu)建過程中顏色操作棋电，而不是引入專門的庫來增加你應(yīng)用的體積和復(fù)雜度茎截。
規(guī)模
向上擴展
Vue 和 React 都提供了強大的路由來應(yīng)對大型應(yīng)用。React 社區(qū)在狀態(tài)管理方面非常有創(chuàng)新精神（比如Flux赶盔、Redux）企锌，而這些狀態(tài)管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 應(yīng)用中。實際上于未，Vue 更進一步地采用了這種模式（Vuex）撕攒，更加深入集成 Vue 的狀態(tài)管理解決方案 Vuex 相信能為你帶來更好的開發(fā)體驗。
兩者另一個重要差異是沉眶，Vue 的路由庫和狀態(tài)管理庫都是由官方維護支持且與核心庫同步更新的打却。React 則是選擇把這些問題交給社區(qū)維護，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)谎倔。但相對的柳击，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮。
最后片习，Vue 提供了Vue-cli 腳手架捌肴，能讓你非常容易地構(gòu)建項目蹬叭，包含了 Webpack，Browserify状知，甚至 no build system秽五。React 在這方面也提供了create-react-app，但是現(xiàn)在還存在一些局限性：
它不允許在項目生成時進行任何配置饥悴，而 Vue 支持 Yeoman-like 定制坦喘。
它只提供一個構(gòu)建單頁面應(yīng)用的單一模板，而 Vue 提供了各種用途的模板西设。
它不能用用戶自建的模板構(gòu)建項目瓣铣，而自建模板對企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的。

而要注意的是這些限制是故意設(shè)計的贷揽，這有它的優(yōu)勢棠笑。例如，如果你的項目需求非常簡單禽绪，你就不需要自定義生成過程蓖救。你能把它作為一個依賴來更新。如果閱讀更多關(guān)于不同的設(shè)計理念印屁。
向下擴展
React 學習曲線陡峭循捺，在你開始學 React 前，你需要知道 JSX 和 ES2015库车，因為許多示例用的是這些語法巨柒。你需要學習構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用 Babel 來實時編譯代碼柠衍，但是這并不推薦用于生產(chǎn)環(huán)境洋满。
就像 Vue 向上擴展好比 React 一樣，Vue 向下擴展后就類似于 jQuery珍坊。你只要把如下標簽放到頁面就可以運行：

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

然后你就可以編寫 Vue 代碼并應(yīng)用到生產(chǎn)中牺勾，你只要用 min 版 Vue 文件替換掉就不用擔心其他的性能問題。
由于起步階段不需學 JSX阵漏，ES2015 以及構(gòu)建系統(tǒng)驻民，所以開發(fā)者只需不到一天的時間閱讀指南就可以建立簡單的應(yīng)用程序。
本地渲染
React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）履怯。能同時跨多平臺開發(fā)回还，對開發(fā)者是非常棒的。相應(yīng)地叹洲，Vue 和 Weex 會進行官方合作柠硕，Weex 是阿里的跨平臺用戶界面開發(fā)框架，Weex 的 JavaScript 框架運行時用的就是 Vue。這意味著在 Weex 的幫助下蝗柔，你使用 Vue 語法開發(fā)的組件不僅僅可以運行在瀏覽器端闻葵，還能被用于開發(fā) ios 和 android 上的原生應(yīng)用。
在現(xiàn)在癣丧，Weex 還在積極發(fā)展槽畔，成熟度也不能和 react native 相抗衡。但是胁编，Weex 的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動厢钧，Vue 團隊也會和 Weex 團隊積極合作確保為開發(fā)者帶來良好的開發(fā)體驗。
MobX
Mobx 在 React 社區(qū)很流行掏呼，實際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)坏快。在有限程度上，React + Mobx 也可以被認為是更繁瑣的 Vue憎夷，所以如果你習慣組合使用它們，那么選擇 Vue 會更合理昧旨。
vue.js對比AngularJS (Angular 1)
Vue 的一些語法和 AngularJS 的很相似（例如 v-if
vs ng-if
）拾给。因為 angularjs 是 Vue 早期開發(fā)的靈感來源。然而兔沃，AngularJS 中存在的許多問題蒋得，在 Vue 中已經(jīng)得到解決。
復(fù)雜性
在 API 與設(shè)計兩方面上 Vue.js 都比 AngularJS 簡單得多乒疏，因此你可以快速地掌握它的全部特性并投入開發(fā)额衙。
靈活性和模塊化
Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織應(yīng)用程序怕吴，而不是在任何時候都必須遵循 AngularJS 制定的規(guī)則窍侧，這讓 Vue 能適用于各種項目。我們知道把決定權(quán)交給你是非常必要的转绷。這也就是為什么我們提供 webpack template伟件，讓你可以用幾分鐘，去選擇是否啟用高級特性议经，比如熱模塊加載斧账、linting、CSS 提取等等煞肾。
數(shù)據(jù)綁定
AngularJS 使用雙向綁定咧织，Vue 在不同組件間強制使用單向數(shù)據(jù)流。這使應(yīng)用中的數(shù)據(jù)流更加清晰易懂籍救。
指令與組件
在 Vue 中指令和組件分得更清晰习绢。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數(shù)據(jù)邏輯钧忽。在 AngularJS 中兩者有不少相混的地方毯炮。
性能
Vue 有更好的性能逼肯，并且非常非常容易優(yōu)化，因為它不使用臟檢查桃煎。
在 AngularJS 中篮幢，當 watcher 越來越多時會變得越來越慢，因為作用域內(nèi)的每一次變化为迈，所有 watcher 都要重新計算三椿。并且，如果一些 watcher 觸發(fā)另一個更新葫辐，臟檢查循環(huán)（digest cycle）可能要運行多次搜锰。AngularJS 用戶常常要使用深奧的技術(shù)，以解決臟檢查循環(huán)的問題耿战。有時沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域蛋叼。
Vue 則根本沒有這個問題，因為它使用基于依賴追蹤的觀察系統(tǒng)并且異步隊列更新剂陡，所有的數(shù)據(jù)變化都是獨立觸發(fā)狈涮，除非它們之間有明確的依賴關(guān)系。
有意思的是鸭栖，Angular 和 Vue 用相似的設(shè)計解決了一些 AngularJS 中存在的問題歌馍。
Angular (原本的 Angular 2)
我們將新的 Angular 獨立開來討論，因為它是一個和 AngularJS 完全不同的框架晕鹊。例如：它具有優(yōu)秀的組件系統(tǒng)松却，并且許多實現(xiàn)已經(jīng)完全重寫，API 也完全改變了溅话。
TypeScript
Angular 事實上必須用 TypeScript 來開發(fā)晓锻，因為它的文檔和學習資源幾乎全部是面向 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 團隊進行著積極的合作，目標是為 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
生成的默認項目尺寸 (~130kb) 還是要小的多。
靈活性
Vue 相比于 Angular 更加靈活匈织，Vue 官方提供了構(gòu)建工具來協(xié)助你構(gòu)建項目浪默，但它并不限制你去如何組織你的應(yīng)用代碼。有人可能喜歡有嚴格的代碼組織規(guī)范缀匕，但也有開發(fā)者喜歡更靈活自由的方式浴鸿。
學習曲線
要學習 Vue，你只需要有良好的 HTML 和 JavaScript 基礎(chǔ)弦追。有了這些基本的技能，你就可以非郴ň海快速地通過閱讀 指南 投入開發(fā)劲件。
Angular 的學習曲線是非常陡峭的 —— 作為一個框架，它的 API 面積比起 Vue 要大得多约急，你也因此需要理解更多的概念才能開始有效率地工作零远。當然，Angular 本身的復(fù)雜度是因為它的設(shè)計目標就是只針對大型的復(fù)雜應(yīng)用厌蔽；但不可否認的是牵辣，這也使得它對于經(jīng)驗不甚豐富的開發(fā)者相當?shù)牟挥押谩?/p>

文章轉(zhuǎn)載自：http://blog.csdn.net/huang_1012/article/details/76926974