Vue和React的区别和联系

作为前端最常用的两大框架，他们有相似之处也有各自不同的优缺点，正确的理解这些内容能使我们在面对项目技术栈的选择中起到巨大的帮助作用。

首先需要明确的一点，不管是React还是Vue都不是MVVM框架，只是借鉴了MVVM的思路开发的框架。

其次两大框架没有必要强调哪个更好的问题，只是各自有所侧重，遇到问题选择更适合自己和项目的才是关键。

两者的异同

相似之处

• 都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
• 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板。
• 都使用了'Virtual DOM'（虚拟DOM）提高重绘性能
• 都有’props’的概念，允许组件间的数据传递
• 都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性
  虽然上面几点提到了两者的相似之处，但是由于设计思路的不同，让两者在具体的实现和应用中存在很多差异

区别之处

数据流
Vue默认支持数据双向绑定，而React一直提倡单向数据流

数据绑定.png

虚拟DOM
Vue2.x 开始引入“Virtual DOM”，消除了和React在这方面的差异，但是在具体的细节还是有各自的特点

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

组件化
React与Vue最大的不同是模板的编写。
Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。
React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。
具体来讲：
React中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

监听数据变化的实现原理不同
Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染
这是因为Vue 使用的是可变数据，而React更强调数据的不可变。

高阶组件
react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展
原因高阶组件就是高阶函数，而React的组件本身就是纯粹的函数，所以高阶函数对React来说易如反掌。相反Vue.js使用HTML模板创建视图组件，这时模板无法有效的编译，因此Vue不采用HoC来实现。
并不是说Vue无法创建高阶组件，而是相对React来说方法更加繁琐

状态管理和对象属性
关于Redux和Vuex的差别，如果展开来讲又是一个相对较大的内容，有时间会开新的文档进行总结，这里主要关注的还是React和Vue框架。

构建工具
两者都有自己的构建工具
React ==> Create React APP
Vue ==> vue-cli

跨平台开发
React ==> React Native
Vue ==> Weex

对比和选择

React优点

• 灵活性和响应性：它提供最大的灵活性和响应能力。
• 虚拟DOM：由于它基于文档对象模型，因此它允许浏览器友好地以HTML，XHTML或XML格式排列文档。
• 丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能。
• 可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好。
• 不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法。
• Web或移动平台： React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。
  无论是Web还是本机移动开发，React都是大多数用户界面设计平台的理想选择。

React缺点
陡峭的学习曲线：由于复杂的设置过程，属性，功能和结构，它需要深入的知识来构建应用程序。

Vue优点

• 易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
• 更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。
• 更好的性能，更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能。
• 精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。
• 适应性：整体声音设计和架构使其成为一种流行的JavaScript框架。它提供无障碍的迁移，简单有效的结构和可重用的模板

Vue缺点
在使用Vue.js时，当state特别多的时候，Watcher也会很多，会导致卡顿。

选择

Vue
最新文档和更简单的语法。
更小，更快，更灵活。
丰富的HTML模板，易于开发。

React
专业和出色的社区支持，以解决任何问题。
需要构建大型应用程序。
轻量级，易于版本迁移。

在生态上来说，两者其实没多大的差距，当然 React 的用户是远远高于 Vue 的。
在上手成本上来说，Vue 一开始的定位就是尽可能的降低前端开发的门槛，然而 React 更多的是去改变用户去接受它的概念和思想，相较于 Vue 来说上手成本略高。