前端三大框架中Vue与React区别

首先React与vue有几点相同之处

1.都使用了Virtual DOM

2.提供了响应式（Reactive）和组件化（Composable）的视图组件

3.将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库

性能方面

#React在性能方面使用virtual DOM实现没有vue的virtual DOM实现好,相比较来讲vue的virtual DOM的实现更为轻量些

#在React应用中,当某个组件的状态发生变化时,它会以该组件为根,从新渲染整个组件子树

若是避免没必要要的子组件的重渲染,你须要在全部可能的地方去使用PureComponent,或者手动去实现shouldComponentUpdate方法,同时你可能会须要使用不可变的数据结构来 使你的组件更容易被优化

可是若是在使用PureComponent和shouldComponentUpdate时,须要保证该组件的整个子树的渲染输出都是由该组件的props所决定的,若是不符合这个状况,那么此类优化就会致使难以察觉的渲染结果不一致,使得React中的组件优化伴随着至关的心智负担

在vue应用中,组件的依赖是在渲染过程当中自动追踪的,因此系统能精确知晓哪一个组件确实被重渲染,能够了解为每一个组件都已经自动得到了shouldComponent,而且没有上述子树问题限制

Vue 的这个特色使得开发者再也不须要考虑此类优化，从而可以更好地专一于应用自己

开发时性能

显然，在生产环境中的性能是相当重要的，目前为止咱们所具体讨论的即是针对此环境。但开发过程当中的表现也不容小视。不错的是用 Vue 和 React 开发大多数应用的速度都是足够快的。

当性能在生产中性能是直接与终端用户体验相关的更重要的指标时，表如今开发中仍然很重要,由于它与开发体验密切相关。

然而，假如你要开发一个对性能要求比较高的数据可视化或者动画的应用时，你须要了解到下面这点：在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。

这是因为 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。咱们一样认为这些是很重要的，可是咱们在实现这些检查时，也更加密切地关注了性能方面。

HTML & CSS

　　在React中,一切都是JavaScript,不只仅是HTML能够用JSX来表达,如今的也愈来愈多地将css也归入到javascript中来处理

　　Vue的总体思想就是拥抱经典的Web技术,并在其上进行扩展

　　在 React 中，全部的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖

　　JSX说是手写的渲染函数有下面这些的优点:

　　1.你可使用完整的编程语言 javascript功能来构建你的视图页面,好比你可使用临时变量 JS自带的流程控制 以及直接引用当前JS做用域中的值等等

　　2.开发工具对JSX的支持相比现有可用的其余VUE模版仍是比较先进的如:linting 类型检测 编辑器的自动完成

事实上Vue也提供了渲染函数,甚至支持JSX,然而,咱们默认推荐仍是template模版,任何合乎规范的HTML都是合法的Vue模版,这也带来一些特有的优点:

　　1.对于不少习惯了 HTML 的开发者来讲，模板比起 JSX 读写起来更天然。这里固然有主观偏好的成分，但若是这种区别会致使开发效率的提高，那么它就有客观的价值存在。

　　2.基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易

　　3.这也使得设计师和新人开发者更容易理解和参与到项目中

　　4.你甚至可使用其余模板预处理器，好比 Pug 来书写 Vue 的模板

咱们能够把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。咱们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不一样有所变化，但总体来讲咱们发现表现类的组件远远多于逻辑类组件。

CSS的组件做用域

若是不把组件分布在多个文件上的话,在React中做用域内的CSS就会产生警告,很是简单的CSS还能够工做,可是稍微复杂点的,好比悬停状态 媒体查询 伪类选择器要么就要经过沉重的依赖来重作,要么就不能使用

规模方面

向上扩展

Vue和React都提供了强大的路由来应对大型应用,而这些状态管理模式甚至 也能够很是容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式vuex，更加深刻集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

Vue和React最重要的差别是,Vue的路由库和状态管理库都是由官方来维护支持而且与核心库同步更新,而React则是选择把这些问题交给社区来维护,所以建立了一个更分散的生态系统,但相对的,React的生态系统相比Vue更加繁荣

最后,Vue提供了Vue-cli脚手架,能让你很是容易地构建项目,包含了Webpack,Browerify,甚至no build system,React在这方面也提供了create-react-app,可是如今还存在一些局限性:

1.它不容许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制

2.它只提供一个构建单页面应用的单一模板，而 Vue 提供了各类用途的模板

3.它不能用用户自建的模板构建项目，而自建模板对企业环境下预先创建协议是特别有用的

而要注意的是这些限制是故意设计的,这有它的优点,例如,若是你的项目需求很是简单,你就不须要自定义生成过程,你能把它做为一个依赖来更新

向下扩展

React学习曲线陡峭,在你开始学React前,你须要知道JSX和ES2015,由于许多事例用的是这些语法,你须要学习构建系统，虽然你在技术上能够用 Babel 来实时编译代码，可是这并不推荐用于生产环境。就像 Vue 向上扩展比如 React 同样，Vue 向下扩展后就相似于 jQuery。你只要把以下标签放到页面就能够运行

本地渲染

ReactNative能使你用相同的组件模型编写有本地渲染能力的APP(ios和Android),能同时跨多平台开发,对开发者是很是棒的

在如今，Weex 还在积极发展，成熟度也不能和 ReactNative 相抗衡。可是，Weex 的发展是由世界上最大的电子商务企业的需求在驱动，Vue 团队也会和 Weex 团队积极合做确保为开发者带来良好的开发体验。

MobX

Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也能够被认为是更繁琐的 Vue，因此若是你习惯组合使用它们，那么选择 Vue 会更合理。