Vue vs React

[ScoutYin]

构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。

Chrome 开发工具

React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用，让你看到Vue或者React中的变化。你也可以看到应用中的状态，并实时看到更新。

配套框架

Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于，两个框架都专注于UI层，其他的功能如路由、状态管理等都交由同伴框架进行处理。
而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。而React的react-router和react-redux则是由社区成员维护，它们都不是官方维护的。

Virtual DOM

Vue和React都是采用Virtual DOM，所谓的Virtual DOM其实是DOM树的虚拟体现，是一个JavaScript对象，它的诞生是基于这么一个概念：改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

例子如下，我们可以看看下面这个列表在HTML中的代码是如何写的：

<ul class="list">
  <li class="item">item 1</li>
  <li class="item">item 2</li>
</ul>

而在JavaScript中，我们可以用对象简单地创造一个针对上面例子的映射：

{
    type: 'ul', 
    props: {'class': 'list'}, 
    children: [
        { type: 'li', props: {'class': 'item'}, children: ['item 1'] },
        { type: 'li', props: {'class': 'item'}, children: ['item 2'] }
    ]
}

真实的Virtual DOM会比上面的例子更复杂，但它本质上是一个嵌套着数组的原生JavaScript对象。
当新一项被加进去这个JavaScript对象或者改变某个属性时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在，React和Vue在此实现上有点不同。

Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。

小结：如果你的应用中，交互复杂，需要处理大量的UI变化，那么使用Virtual DOM将是个好主意。如果你更新元素并不频繁，那么Virtual DOM也并不一定适用，性能很可能还不如直接操控DOM。

组件化（模板 vs JSX）

Vue和react都是采用组件化开发的思想，Vue默认采用近似常规HTML的模板语法（其实也可以选择render和JSX），而React使用JavaScript的扩展语法JSX语法（即HTML in JavaScript）

状态管理 vs 对象属性

React中的state（状态）不能直接被改变，需通过setState()去更新状态，而Vue中state对象不是必须的，数据由data属性在Vue对象中进行管理。

Vue.js的作者尤雨溪曾说过，（Vue的）解决方案适用于小型应用，但对于大型应用而言不太适合。
大多数情况下，框架内置的状态管理是不足以支撑大型应用的，Redux或Vuex等状态管理方案是必须使用的。