react vue选哪一个：Vue向左React向右你该如何选择
react vue选哪一个：Vue向左React向右你该如何选择Vue是由 Google 前工程师Evan You个人开发，2014年2月发布 vue2.0版本，生态圈较小，没有任何顶级公司的支持，这会导致它缺乏可靠性，以及在市场上的推广。但是 Vue 意外的获得了开发人员的欢迎和支持，使它克服这一障碍。Vue 自己创建了社区支持。技术的背景<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="
作为前端人员是否时常会对前端技术栈的选择有困扰，尤其是对Vue和React两个大热前端技术的选择，本文会从多角度去对比Vue和React的技术特点和应用场景：
- Vue和React我应该选择哪个技术作为自己必备的技术栈？
- Vue和React哪个更适合我要开发的web项目？
- Vue和React中哪个更可靠？
Hello world!
对待一个新技术的学习，你是不是忍不住会首先用这个新技术敲一个“Hello world!“呢，我们也从一个“Hello world!“开始我们的对比吧，用一个“Hello world!“来感受他俩的不同。
- Vue
Vue生成的是.vue文件，在这个文件里面写dom、css、js，这部分和我们传统的web保持了一致，Vue也称作“视图表现组件”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app'
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
- React
React的作者认为视图表现，数据和逻辑天然是耦合的，所以没必要把他们分开，所以创建了JSX语言。React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>
document.getElementById('example')
);
</script>
</body>
</html>
热度
我们看一下google趋势图比较近一年Vue和React的热度（蓝色：Vue，红色：React），我们会发现两个基本在伯仲之间，在国内市场Vue的热度还是稍占上峰的。
技术的背景
- Vue
Vue是由 Google 前工程师Evan You个人开发，2014年2月发布 vue2.0版本，生态圈较小，没有任何顶级公司的支持，这会导致它缺乏可靠性，以及在市场上的推广。但是 Vue 意外的获得了开发人员的欢迎和支持，使它克服这一障碍。Vue 自己创建了社区支持。
- React
React是facebook团队开发，2013.3月发布。社区较成熟，拥有更大的生态圈。Facebook 员工致力于为React 添加新的和高级的功能。这为react开发人员提供了强大的可靠性。
生命周期
- Vue
- React
框架
- Vue
Vue本质是MVVM框架，由MVC发展而来。Vue 生产版为94KB， Vue 会比React更小，使其更适合轻量级应用。
- React
React是前端组件化框架，由后端组件化发展而来。React为100多KB。它的小尺寸也非常适合轻量级应用。
定位
- Vue
一款适合入门的渐进式框架，你js基础可能不太好，但是也可以用vue 照着文档去开发一些业务，但是如果你想用好vue 你就要熟练vue 的这套语法。
- React
专家路线，React 本身不难，但是React 需要用到很多js原生写法，你不管干什么都要去自己手动去操作，所以js基础很重要。
数据交互
- Vue
Vue 是“自动挡”，响应式思想，数据的双向绑定。
- React
React 是“手动挡”，函数式思想，单向数据流。
渲染过程
- Vue
Vue在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，所以Vue可以更快的计算出Virtual DOM的差异。
- React
React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。
状态管理
Vue使用Vuex管理状态，React使用了Flux管理状态。Vuex和Flux都是强调组件化，都强调单向数据流。Vuex也是受到Flux启发而诞生。
- Vue
Vuex，Vuex也是受到Flux启发而诞生，Vuex不仅提出了这个框架概念，还实现并且提供了这个框架，让开发起来更加便捷。Vuex中保留了action与store的概念，并且引入了新的mutation。
- React
Flux，在Flux初期，Facebook只是推出了Flux这个框架概念，而没有实现这个框架。当然现在React的github项目里已经有Flux框架的示例代码，以及他们推出了Relay框架。
作者的选择
作者周围也存在很多VUE和React的拥护者，就技术本身而言并没有绝对的好坏之分。哪种技术更适合自己的团队其实才是最重要的。对于作者的团队为什么选择VUE，而不是react，主要从下面几个方面考虑。
- 在作者工作的地方，具备Vue技术栈的开发人员会更容易得到，在公司业务拓展和团队成员流失的情况下，我们能够更快更好的补充新的成员进入团队。
- Vue比React的学习成本更低，团队有一部分需要学习转型的老员工，使用Vue会让他们更快的上手。
- Vue有很多优秀的UI框架，Element、AntDesigin、iVuew等，使用这些UI框架能够帮助我们很快很好的搭建Pc端项目。
- 在技术上，Vue从React那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并在此基础上做了很好了升级，同时意识到状态管理的重要性。
- 我们除了选择Vue作为Pc管理端的技术栈，同时我们选择了uniapp作为H5、原生、小程序的技术栈。其中uniapp是使用了Vue框架，所以选择Vue框架会让我们大前端团队的技术栈达到高度统一，有利于团队的技术相互学习和深入。
The END
如果您觉得这篇内容对您有帮助，我想请你帮我两个小忙：
1、给作者点个赞，分享让更多的人也能看到这篇文章
2、关注头条号「前端百思说」，加入我们一起学习
