【译文&摘抄】Angular、React、Vue的2017

原文地址：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