vue和react之间的差异

参考http://caibaojian.com/vue-vs-react.html

React
是由Facebook创建的javascript UI 框架，它支撑着包括instagram在内的大多数Facebook网站，react与当时流行的jquery, bacebone.js和Angular.js等框架不同，他的诞生改变了javascript的世界，其中最大的变化是react推广了virtual dom，并创建了新的语法jsx，jsx允许开发者在javascript中书写html

Vue

致力于解决的问题与React一致，但却提供了另外一套解决方案，vue使用模版系统而不是jsx，使其对现有应用的升级更加容易，这是因为模版用的就是普通的html，通过vue来整合现有的系统是比较容易的，不需要整体重构，同时vue学习更加容易，vue主要是由一位开发者进行维护的，而不像react一样由facebook这类大公司维护

相似之处

react和vue的相似之处，例如他们都是js的ui框架，专注于创造前端的富应用，不同于早期js框架’功能齐全’， react与vue只有框架的骨架，其他的功能如路由，状态管理等是框架分离的组件

Virtual Dom(虚拟dom)

vue和react最大的一个相似之处，就是都使用了一种叫虚拟dom的东西，所谓的Virtual dom基本上说就是它名字的意思，虚拟dom，dom树的虚拟表现，他的诞生是基于一个概念，改变真实的dom状态比改变一个js对象的花销要大的多
Virtual dom是一个映射真实dom的js对象，如果需要改变任何元素的状态，那么先在Virtual Dom上进行改变，而不是直接改变真实的dom，当有变化的时候，一个新的Virtual dom对象会被创建并计算新旧Virtual dom之间的差别，只有再将这些差别应用在真实的dom上

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

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

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

{
	type: 'ul',
	props: {'class':  'list'},
	children: [
			{ 
				type: 'li'
				props: {}
				children: ['item1']
		    },
		    { 
				type: 'li'
				props: {}
				children: ['item2']
		    }
	]
}
真实的Virtual dom会比上面的例子复杂的多，但它本质是一个嵌套这数组的原生对象 

当新一项被加进去这个js对象时，一个函数会计算出Virtual dom之间的差异并反应在真实的dom上，计算差异的算法是高性能框架的秘密所在(diff算法) ，react和Vue在实现上有点不同

Vue宣称可以更快地计算出Virtual Dom地差异，这是由于他在渲染地过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件🌲

而对于react而言，每当应用的状态被改变时，全部子组件都会重新渲染，当然，这可以通过shouldComponentUpdate这个生命周期的方法来进行控制，但Vue将此视为默认的优化

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

组件化
react与vue都鼓励组件化应用，这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系

你可以认为组件就是用户界面中的一小块，如果让我来设计Facebook的UI 界面，那么聊天窗口只会是一个组件，评论会是另一个组件，不断更新的好友列表也会作为一个组件

在Vue中，如果你遵守一定的规则，你可以使用单文件组件，就是将html, javascript, css写在同一个文件中，不需要再.vue文件中引入css， < style src="./Pasta.css"> </ style>
这样也是可以的

react也是非常相似的，javascript被写入同一个组件文件中

props
vue和react中，都有props的概念，props在组件中是一个特殊的属性，允许父组件往子组件传送数据

在react中，这是必须的，它依赖一个‘单一数据源’作为他的‘状态’

在vue中。props略有不同，他们一样是在组件中被定义，但vue依赖于模版语法，你可以通过模版循环函数更高效的展示传入的数据

不同之处

配套框架

Vue和React相似但不同之处在于配套框架的处理方法，相同之处在于，两个框架都专注于UI 层，其他的功能，如路由，状态管理等都交由同伴框架进行处理

而不同之处在于他们如何关联他们各自的配套框架，Vue的核心团队维护者vue-router,vuex,他们都是作为官方推荐的存在，而React的react-router和react-redux则是由社区成员维护，他们都不是官方维护的

模版 ， jsx
React与vue最大的不同是模版的编写，vue鼓励写近似常规的html模版，写起来很接近标准html元素，只是多了一些属性

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

这些属性也可以被使用在单文件组件中，尽管它需要在构建时将组件转换为合法的javascript和html

<ul>
  <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
</ul>

vue鼓励你去使用html模版去进行渲染，因此，通过把原有的模版整合成新的vue模版，vue很容易提供久的应用的升级，这也让新来者很容易适应他的语法

而React推荐你所有的模版通用javascript的语法扩展 — jsx书写，同样的代码，用jsx书写代码如下

<ul className="pasta-list">
    {
        Object.keys(this.state.pastadishes).map(key =>
            <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
        )
    }
</ul>

jsx只是javascript混合着xml语法，相反的观点是vue的模版语法除了往视图/组件添加逻辑的诱惑，保持了关注点分离

状态管理 vs 对象属性

应用中的状态是react关键的概念，也有一些配套框架被设计为管理一个大的state对象，如redux, 此外，state对象在react中是不可变的，意味着它不能被直接改变，在react中你需要使用setstate()方法去更新状态

而在vue中，state对象并不是必须的，数据由data属性在vue对象中进行管理，不需要使用setstate之类的方法去改变他们的状态，在vue对象中，data参数就是应用中数据的保存者

对于管理大型应用中的状态这一话题而言，vue解决方案适用于小型项目，对于大型项目而言不适合， 多数情况下，框架内置的状态管理是不足以支撑大型应用的，redux或vuex等状态管理方案是必须应用的

React Native
react native能在手机上创建原生应用，react在这方面处于领先位置，使用javascript， css和html创建原生移动应用，这是一个重要的革新，vue社区和阿里合作开发的vue版的react native----Weex也很不错，但仍处于开发状态且没经过实际项目的验证，如果你想将现有的应用升级为新的javasctipt框架，建议使用vue