React or Vue？

1. 如果喜欢使用模板构建应用程序，那么选择Vue

大括号用于数据绑定表达式，指令用于向模板添加功能

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: () => {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

相比之下，React应用程序避开模板，要求在JavaScript中创建DOM，通常使用JSX语法。

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));

2. 如果喜欢简单的能正常工作的，那么选择Vue

在React中State是不可以直接改变的，需要调用setState接口：

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

当前和之前的状态差异让React知道什么时候在DOM中重新渲染以及渲染什么，因此不可变的状态是非常必要的。

相比之下，数据可以在Vue中突变。

this.message = this.message.split('').reverse().join('');

3. 如果希望程序更小更快，那么选择Vue

4. 如果你想要构建大型应用程序，那么请选择React（对团队开发能力有要求）

• vue 特性比较多, 很容易写出不受控制的项目,
• vue 封装太多,
• vue构建基于模板的应用程序, 有些很微妙错误极其难追踪和调试，不易重构或分解
• react 里发生的一切都是可预知，当透明度和可测试性至关重要时，它会发挥更大的作用。

5. 如果你想要一个同时适用于web和原生APP的库，那么请选择React

6. 如果你想要最大的生态系统，那么请选择React

7. 如果已经选择了其中的一个，那么也不需要换了

总而言之：

Vue的优势是：

• 模板或渲染的灵活选项

• 语法以及项目设置的简单

• 渲染速度更快，体积更小

React的优势是：

• 更大的规模、更多的使用者、更好的可测试性

• Web和原生APP

• 能提供更多支持和工具的更大的生态系统

React和Vue都是优秀的UI库，并且具有更多的相似之处。它们都有的优势是：

• 使用虚拟DOM快速渲染

• 轻量级

• 响应式组件

• 服务端渲染

• 轻松集成的的路由、捆绑和状态管理

• 强大的支持和社区