Vue和React两个JavaScript框架都是当下比较受欢迎的，下面我们来一起探讨下它们的异同和技术选型。
1. 相同点
1.1 都使用了虚拟Dom
Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
在HTML中的标签
HTML中div
在JavaScript中，虚拟Dom可以用对象简单地创造一个针对上面例子的映射在JavaScript中的映射当新一项被加进去这个JavaScript对象时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。
计算差异的算法是高性能框架的秘密所在，React和Vue在实现上有点不同。
Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。
1.2 组件化
React与Vue都鼓励组件化应用。这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。
下面我们看一个简单组件的例子
// Vue例子
<template>
<div class="content">
<img :src="item.icon" :alt="item.alt"/>
<div>
<p class="header">{{item.name || ''}}</p>
<p>{{item.des || ''}}</p>
</div>
</div>
</template>
<script>
export default {
name: "test-item",
props: {
"item": {
type: Object,
default: {}
},
}
}
</script>
<style scoped>
.content {
width: 100%;
padding: 8px;
display: flex;
justify-content: flex-start;
text-align: left;
}
.content img {
height: 20px;
width: 20px;
margin: auto 8px auto 0;
}
.content .header {
font-weight: bolder;
}
</style>
// React
import React from "react";
class TestItem extends React.Component {
render() {
const { item } = this.props;
return (
<div className="content">
<img src={item.icon} alt={item.alt} />
<div>
<p className="header">{item.name || ''}</p>
<p>{item.des || ''}</p>
</div>
</div>
);
}
}
export default TestItem;
1.3 Chrome 开发工具
React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用，让你看到Vue或者React中的变化。你也可以看到应用中的状态，并实时看到更新
React的开发工具react-devtools
Vue的开发工具vue-devtools
1.4 构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板
1.5 配套框架
Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于，两个框架都专注于UI层，其他的功能如路由、状态管理等都交由其他框架进行处理。
而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。而React的react-router、dva和react-redux则是由社区成员维护。
2. 不同点
Vue与React有很多的相似之处，但他们也有完全不一致的地方。
2.1 JSX和模板
React与Vue最大的不同就是一个使用JSX语法编写(React), 一个使用模板编写(Vue)
Vue鼓励你去使用HTML模板去进行渲染, 因此，通过把原有的模板整合成新的Vue模板，Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。而React推荐JSX书写。同样的效果，用JSX书写的如下：<test-item v-for="(item, index) in data" :item="item" :index="index" :key="index" :clickHandle="testItemClick(item)" />看起来JSX有些比较麻烦, 但是使用起来比较灵活data.map((item, index) => { const itemProps = { item, index, key: index, clickHandle: this.testItemClick.bind(this) }; return <TestItem {...itemProps} /> })
与React一样，Vue在技术上也支持render函数和JSX，但只是不是默认的而已。我们来看下Vue官方的一个例子import AnchoredHeading from './AnchoredHeading.vue' new Vue({ el: '#demo', render: function (h) { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) } })
2.2 状态管理(React)和对象属性(Vue)
React通过状态(state)进行管理, 并且state对象在React应用中是不可变的在React中你需要使用setState()方法去更新状态而在Vue中, 数据由data属性在Vue对象中进行管理。testItemClick (item) { const data = [...this.state.data]; item.count += 1; this.setState({ data }) }testItemClick (item) { const items = [...this.items]; item.count += 1; this.items = items; }
2.3 React Native 和 Weex
React Native能在手机上创建原生应用，React在这方面处于领先位置。使用JavaScript, CSS和HTML创建原生移动应用, 并且有丰富的官方组件。Vue社区与阿里合作开发Vue版的React Native——Weex也很不错，但仍处于开发状态并且官方组件并不是太丰富。
3. 技术选型
对比完React和Vue的一些特点后, 我们来探讨下在项目中到底该选择那种框架
3.1 编码风格
如果你喜欢使用JSX,React更加适合; 如果你喜欢使用模板,Vue更加适合;
3.2 性能测试
下面是性能对比运行速度内存占用这些性能测试显示，Vue 比 React 占用的内存更少，运行速度更快
3.3 大型应用程序
用Vue和React实现的简单应用程序来比较两者，可能会让一个开发者从一开始就更倾向于Vue。这是因为基于模板的应用程序乍看上去更易理解，而且能很快地写好并跑起来。但是这些最初的便利会引入技术债并阻碍应用扩展到更大的规模。模板容易出现难以注意到的运行时错误，同时也不易于测试，重构和分解。
相比之下，Javascript模板可以组织成经过良好分解，且使用避免重复代码原则的代码组件，因而具有更强的可重用性和可测试性。Vue也有组件系统和渲染函数，但React的渲染系统可配置性更强，并包含如shallow rendering这样的特性，可结合React的测试工具一起使用，从而大为提高代码的可测试性及可维护性。
3.4 React更加适合原生应用
React Native是一个用于通过Javascript构建移动端原生应用程序的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。// JS import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class HelloWorld extends Component { render() { return ( <View> <Text>Hello, React Native!</Text> </View> ); } } AppRegistry.registerComponent('HelloWorld', () => HelloWorld); 我们只需要一套知识和工具就能开发Web应用和移动端原生应用。阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法。但是目前还不够成熟。
3.5 生态圈
就目前来说, React比Vue要受欢迎许多ReactVue
这两个框架都是开源的，但是React诞生于Facebook，它的开发者和Facebook都承诺会持续维护React。而Vue则是由独立开发者尤雨溪创造，目前也只有他一名全职维护者。虽然也有一些公司资助Vue，但是规模和Facebook没得比。但是在Github上Vue(122K)获得星数超过了React(117K)
最后, 到底是选择React和Vue, 个人感觉要看开发团队的技术栈, 如果喜欢使用jsx建议用React, 如果喜欢使用模板建议使用Vue; 如果做原生APP, 建议使用ReactNative
