原文地址：https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
作者：Jens Neuhaus
Web 三劍客：Angular、React、Vue
一些歷史：
Angular：源自 Google，是基於 TypeScript 的 Javascript 框架。被描述爲：“超級厲害的 JavaScript MVW 框架”（Model- View-Whatever，MVW…..咦有點萌）
一段 create-react-app 的 TypeScript 代碼：
// src/components/Hello.tsx
import * as React from 'react';
export interface Props {
name: string; // That's TYPE!
enthusiasmLevel?: number;
}
function Hello({ name, enthusiasmLevel = 1 }: Props) {
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
</div>
);
}
export default Hello;
// helpers
function getExclamationMarks(numChars: number) {
return Array(numChars + 1).join('!');
}React：被描述爲 “用於構建用戶界面的 JavaScript 庫”，由 Facebook 進行開發和維護。
Facebook 目前正在開發 React Fiber。它會改變 React 的底層算法，渲染速度應該會更快。
Vue: Vue 將自己描述爲一款“用於構建直觀，快速和組件化交互式界面的 MVVM (Model–view–viewmodel，MVVM 模式將 MVP 的 Presenter 改名爲 ViewModel，基本上與 MVP 模式完全一致。) 框架”。
Comparision
組件
React 和 Vue 都擅長處理組件，組件其實即是函數，接收參數輸入並返回元素作爲輸出。
詳細說明：一個組件（本質就是一個函數）得到一個輸入（函數參數），並且進行一些內部的行爲/計算之後，返回一個渲染的 UI 模板作爲輸出。定義的組件應該易於在網頁或其他組件中重用（組件的一個目的就是爲了複用）。
Typescript，ES6 與 ES5
React 使用 Javascript ES6。
Vue 使用 Javascript ES5 或 ES6。
Angular 則依賴於 TypeScript。(儘管 TypeScript 在不斷髮展，但與整個 JavaScript 語言相比，TypeScript 的用戶羣仍然很小。一個風險可能是你正在向錯誤的方向發展…..)
模板 —— JSX 還是 HTML
React 打破了長期以來的最佳實踐。幾十年來，開發人員試圖分離 UI 模板和內聯的 Javascript 邏輯，但是使用 JSX，這些又被混合了。…..但是，分離模板和邏輯應該僅僅是技術的分離，而不是關注的分離。你應該構建組件而不是模板。組件是可重用的、可組合的、可單元測試的。
JSX 是一個類似 HTML 語法的【可選預處理器】，並隨後在 JavaScript 中進行編譯。
JSX 意味着 React 中的所有內容都是 Javascript – 用於JSX模板和邏輯。Cory House 在 2016 年 1 月的文章 中指出：“Angular 2 繼續把 ‘JS’ 放到 HTML 中。React 把 ‘HTML’ 放到 JS 中。”
這是一件好事，因爲 Javascript 比 HTML 更強大。
框架和庫
Angular 是一個框架，但是 React 和 Vue 則是庫。
之所以說 Angular 是一個庫，是因爲它提供了關於如何構建應用程序的強有力的約束，Angular 是一個 “完整的解決方案” - 功能齊全，你可以愉快的開始開發。你不需要研究庫，路由解決方案或類似的東西 - 你只要開始工作就好了。
另一方面，React 和 Vue 是很靈活的。他們的庫可以和各種包搭配。
有了 React，你甚至可以交換庫本身的 API 兼容替代品，如 Inferno。然而，靈活性越大，責任就越大 - React 沒有規則和有限的指導。每個項目都需要決定架構，而且事情可能更容易出錯。
關於 React & Vue : React “是 JS 界在意識層面向前邁出的一大步，它以一種實用簡潔的方式向人們展示了真正的函數式編程。和 Vue 相比，React 的一大缺點是由於 JSX 的限制，組件的粒度會更小。這裏是文章的引述：
對於我和我的團隊來說，代碼的可讀性是很重要的，但編寫代碼很有趣也是非常重要的。在實現真正簡單的計算器小部件時創建 6 個組件並不奇怪。在許多情況下，在維護，修改或對某個小部件進行可視化檢查方面也是不好的，因爲你需要繞過多個文件/函數並分別檢查每個小塊的 HTML。再次，我不是建議寫巨石 - 我建議在日常開發中使用組件而不是微組件。
狀態管理和數據綁定
構建用戶界面很困難，因爲處處都有狀態 - 隨着時間的推移而變化的數據帶來了複雜性。定義的狀態工作流程對於應用程序的增長和複雜性有很大的幫助。
它是如何工作的？
組件在任何時間點描述 UI。當數據改變時，框架重新渲染整個 UI 組件 - 顯示的數據始終是最新的。我們可以把這個概念稱爲“ UI 即功能”。
React 經常與 Redux 在一起使用；Vue 可以使用 Redux，但它提供了 Vuex 作爲自己的解決方案。
React 和 Angular 之間的巨大差異是單向與雙向綁定。當 UI 元素（例如，用戶輸入）被更新時，Angular 的雙向綁定改變 model 狀態。React 只有一種方法：先更新 model，然後渲染 UI 元素。
1）Angular 的方式實現起來代碼更乾淨，開發人員更容易實現。
2）React 的方式會有更好的數據總覽，因爲數據只能在一個方向上流動（這使得調試更容易）。
How to Choose
如果你在Google工作：Angular
如果你喜歡 TypeScript：Angular（或 React）
如果你喜歡面向對象編程（OOP）: Angular
如果你需要指導手冊，架構和幫助：Angular
如果你在Facebook工作：React
如果你喜歡靈活性：React
如果你喜歡大型的技術生態系統：React
如果你喜歡在幾十個軟件包中進行選擇：React
如果你喜歡JS和“一切都是 Javascript 的方法”：React
如果你喜歡真正乾淨的代碼：Vue
如果你想要最平緩的學習曲線：Vue
如果你想要最輕量級的框架：Vue
如果你想在一個文件中分離關注點：Vue
如果你一個人工作，或者有一個小團隊：Vue（或 React）
如果你的應用程序往往變得非常大：Angular（或 React）
如果你想用 react-native 構建一個應用程序：React
如果你想在圈子中有很多的開發者：Angular 或 React
如果你與設計師合作，並需要乾淨的 HTML 文件：Angular or Vue
如果你喜歡 Vue 但是害怕有限的技術生態系統：React
如果你不能決定，先學習 React，然後 Vue，然後 Angular。
