Vue与React比较

与React

相似：

（1）虚拟DOM（Virtual DOM）

虚拟DOM的诞生是基于：改变真实的DOM状态远比改变一个JS对象的花销要大的多。

虚拟DOM是一个映射真实DOM的JS对象，当有变化产生时，就会创建一个新的虚拟DOM对象，计算新旧Virtual DOM的差别，然后把这些差别应用在真实的DOM上。

虚拟DOM的本质是嵌套着数组的原生对象，当新一项被加进当前JavaScript对象时，一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算这些差异的算法。（核心）

Vue在渲染过程中会跟踪每一个组件的依赖关系，不需要重新对整个组件树渲染，Vue默认进行了优化；

React每当应用的状态被改变时，全部子组件都会重新渲染，可以通过shouldComponentUpdate（一种生命周期方法）来进行控制，以避免不必要的渲染开销。

 

（2）可视化组件

组件化应用：把一个应用拆分成功能明确的模块，每个模块之间通过某种方式互相关联

（3）都提供了路由和状态管理模块

 

不同：

（1）模板与JSX

最大的区别是模板不同，Vue模板近似常规的HTML，使用HTML模板进行渲染，把html、css、js组合到一起，用各自的处理方式，提供了模板引擎处理

React推荐使用JSX--一种JS语法扩展（JS混杂着XML语法），使用编程思维书写模板，思路是all in js，用JS生成html，用JS操作css；JSX实际是React对HTML的封装

 

（2）对象属性 vs 状态管理

Vue中state不是必须存在的，数据由data属性在Vue对象中管理，data可以保存数据；vuex是大型复杂应用的状态管理方案；每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态；

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

 

React的state对象在应用中不可变，需要使用setState()方法更新；React中的Redux被设计为管理一个全局state对象/Flux

 

（3）React Native 与 WEEX

React Native能在手机上创建原生应用；

Vue后与阿里合作开发Weex；

 

（4）扩展

在路由库的问题上，React 选择把问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

react中，需要引入react-router库，使用时，路由器Router就是React的一个组件。Router组件本身只是一个容器，真正的路由要通过Route组件定义,Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。

 

Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的；使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。