React与Vue的相同与不一样点

咱们知道JavaScript是世界上最流行的语言之一，React和Vue是JS最流行的两个框架。因此要想前端的开发那么必须掌握好这两个框架。

那么这两个框架有什么不一样呢？

React 和 Vue 相同之处，它们都有：

• 使用 Virtual DOM
• 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
• 将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库。

React与Vue的不一样之处：

一、数据绑定  

     vue是双向绑定，

   Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，不管谁被改变，另外一方会相应的更新为相同的数据。这是经过设置属性访问器实现的。在vue中，与数据绑定有关的有 插值表达式、指令系统、*Class和Style、事件处理器和表单空间、ajax请求和计算属性

  react没有数据双向绑定
  react是单向数据流
 react中经过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来讲就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像表单操做、触发事件、ajax请求等触发数据变化，则进行双同步

二、状态管理

react

Readux实际上是Flux的一种进阶实现。它是一个应用数据框架，主要做用应用状态的管理。

Redux三大原则：

单一数据源、状态是只状态读的、状态修改均有纯函数完成。

Redux中3个经常使用的方法

一、createStore() 建立store

二、combineReducers() 合并多个reducer

三、applayMiddleware()使用中间件，处理异步的action

   它的工做流程：

   首先先建立一个Action,经过dispatch把action发送给Store，Store把Action给了Reducer，Reducer有两个参数（previous，action）作数据的修改，而后给了Store，Store触发了subscribe（）这个方法调用函数执行setState使View发生改变。

如图所示：

Vue

Vuex也是公共状态管理，他是最好的非父组件传值方式。

Vuex中五个属性主要的做用里面的方法：

有五种，分别是 State、 Getter、Mutation 、Action、 Module

 

state

    一、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于通常Vue对象

   里面的data

   二、state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依

   赖这个数据的组件也会发生更新

  三、它经过mapState、mapGetters把全局的 state 和 getters 映射到当前组件的 computed 计算属

  性中

 

 Getter

   一、getters 能够对State进行计算操做，它就是Store的计算属性

   二、 虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用

  三、 若是一个状态只在一个组件内使用，是能够不用getters

 

Action

用来处理异步以及一些业务逻辑，里面的全部的函数的参数都有两个值，参数1：一个为对象，参数2：传递过来的参数

Mutation

有两个参数：参数1：state、参数2：params也就是传递过来的参数   用来修改state中的数据

 

Module

实现模块化

 

Vuex传递流程：

 当组件须要修改state中的数据的时候必须经过dispatch来触发action里面的方法，action每一个方法都会有一个commit方法，用来触发mutation，mutation用来修改state中的数据，当mutation里面的方法触发数据的时候，数据就会发生改变，由于数据是响应式的，所以组件数据也会发生改变。

 

如图所示：

三、路由

        二者的路由很类似，都是利用了组件化思想

react

在路由库的问题上，React 选择把问题交给社区维护，所以建立了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。
react中，须要引入react-router库，
使用时，路由器Router就是React的一个组件。
Router组件自己只是一个容器，真正的路由要经过Route组件定义。
Route组件定义了URL路径与组件的对应关系。你能够同时使用多个Route组件。

Vue

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

四、 渲染性能对比

react视图渲染
React 的渲染创建在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 从新渲染 Virtual DOM，比较计算以后给真实 DOM 打补丁。

Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会从新渲染整个应用，所以从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

在超大量数据的首屏渲染速度上，React 有必定优点，由于 Vue 的渲染机制启动时候要作的工做比较多，并且 React 支持服务端渲染。

元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不一样，React 当中的元素事实上是普通的对象，React DOM 能够确保 浏览器 DOM 的数据内容与 React 元素保持一致。

咱们用React 开发应用时通常只会定义一个根节点。但若是你是在一个已有的项目当中引入 React 的话，你可能会须要在不一样的部分单独定义 React 根节点。咱们将 元素传入一个名为 ReactDOM.render() 的方法来将其渲染到页面上，页面上就会显示该元素。
组件渲染 
 当React遇到的元素是用户自定义的组件，它会将JSX属性做为单个对象传递给该组件,这个对象称之为“props”

 

vue视图渲染
Vue 经过创建一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。

vue渲染的过程以下：

  new Vue，执行初始化
  挂载$mount方法，经过自定义Render方法、template、el等生成Render函数
  经过Watcher监听数据的变化
  当数据发生变化时，Render函数执行生成VNode对象
  经过patch方法，对比新旧VNode对象，经过DOM Diff算法，添加、修改、删除真正的DOM元素

五、 数据更新

 react数据更新
React 元素都是immutable 不可变的。当元素被建立以后，你是没法改变其内容或属性的。一个元素就好像是动画里的一帧，它表明应用界面在某一时间点的样子。
根据咱们现阶段了解的有关 React 知识，更新界面的惟一办法是建立一个新的元素，而后将它传入 ReactDOM.render() 方法。

vue数据更新

经过forceUpdate能够实现数据强制更新

六、 开发模式及规模

react

开发模式

React自己，是严格的view层，MVC模式

脚手架
React 提供了create-react-app，可是如今还存在一些局限性：
它不容许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。
它只提供一个构建单页面应用的单一模板，而 Vue 提供了各类用途的模板。
它不能用用户自建的模板构建项目，而自建模板对企业环境下预先创建协议是特别有用的。

vue

Vue是MVVM模式的一种方式实现

虽然没有彻底遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。所以在文档中常常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。

脚手架

Vue 提供了Vue-cli 脚手架，能让你很是容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。

七、HTML&&CSS

react

JSX
在 React 中，全部的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
JSX, 一种 JavaScript 的语法扩展。 咱们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它彻底是在 JavaScript 内部实现的。

JSX 用来声明 React 当中的元素。

JSX自己也是一种表达式，在编译以后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实能够在 if 或者 for 语句里使用 JSX，将它赋值给变量，看成参数传入，做为返回值均可以
JSX 说是手写的渲染函数有下面这些优点：
你可使用完整的编程语言 JavaScript 功能来构建你的视图页面。好比你可使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 做用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其余 Vue 模板仍是比较先进的 (好比，linting、类型检查、编辑器的自动完成)。

组件做用域内的CSS
除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 做用域在 React 中是经过 CSS-in-JS 的方案实现的 (好比 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里一般仍是须要一个运行时程序来让这些样式生效。当你可以利用 JavaScript 灵活处理样式的同时，也须要权衡 bundle 的尺寸和运行时的开销。

Vue

Templates模板语法
事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，咱们默认推荐的仍是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优点：
对于不少习惯了 HTML 的开发者来讲，模板比起 JSX 读写起来更天然。这里固然有主观偏好的成分，但若是这种区别会致使开发效率的提高，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
这也使得设计师和新人开发者更容易理解和参与到项目中。
你甚至可使用其余模板预处理器，好比 Pug 来书写 Vue 的模板。
Vue.js 使用了基于 HTML 的模板语法，容许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 可以智能地计算出从新渲染组件的最小代价并应用到 DOM 操做上。
单文件组件CSS
Vue 设置样式的默认方法是单文件组件里相似 style 的标签。
单文件组件让你能够在同一个文件里彻底控制 CSS，将其做为组件代码的一部分。
Vue 的单文件组件里的样式设置是很是灵活的。经过 vue-loader，你可使用任意预处理器、后处理器，甚至深度集成 CSS Modules——所有都在

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

八、 使用场景

react

一、期待构建一个大型应用程序

二、期待同时适用于Web端和原生APP的框架

三、 期待最大的生态系统

vue

一、 期待模板搭建应用

二、期待简单和“能用就行”的东西

三、期待应用尽量的小和快

九、服务器端渲染（SSR）

react

React的虚拟DOM是其可被用于服务端渲染的关键。首先每一个ReactComponent 在虚拟DOM中完成渲染，而后React经过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM做为内存中的DOM表现，为React在Node.js这类非浏览器环境下的吮吸给你提供了可能，React能够从虚拟DoM中生成一个字符串。而不是跟新真正的DOM，这使得咱们能够在客户端和服务端使用同一个React Component。

React 提供了两个可用于服务端渲染组件的函数：React.renderToString 和React.render-ToStaticMarkup。 在设计用于服务端渲染的ReactComponent时须要有预见性，考虑如下方面。

选取最优的渲染函数。
如何支持组件的异步状态。
如何将应用的初始化状态传递到客户端。
哪些生命周期函数能够用于服务端的渲染。
如何为应用提供同构路由支持。
单例、实例以及上下文的用法。

vue

Vue.js 是构建客户端应用程序的框架。默认状况下，能够在浏览器中输出 Vue 组件，进行生成 DOM 和操做 DOM。然而，也能够将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上彻底交互的应用程序。

服务器渲染的 Vue.js 应用程序也能够被认为是”同构”或”通用”，由于应用程序的大部分代码均可以在服务器和客户端上运行。

2. 服务器端渲染优点
- 更好的 SEO，因为搜索引擎爬虫抓取工具能够直接查看彻底渲染的页面。
- 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络状况或运行缓慢的设备。无需等待全部的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，因此你的用户将会更快速地看到完整渲染的页面。一般能够产生更好的用户体验，而且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)相当重要。

十、总结

Vue的优点包括：
- 模板和渲染函数的弹性选择
- 简单的语法及项目建立
- 更快的渲染速度和更小的体积

- React的优点包括： - 更适用于大型应用和更好的可测试性 - 同时适用于Web端和原生App - 更大的生态圈带来的更多支持和工具 - 而实际上，React和Vue都是很是优秀的框架，它们之间的类似之处多过不一样之处，而且它们大部分最棒的功能是相通的： - 利用虚拟DOM实现快速渲染 - 轻量级 - 响应式和组件化 - 服务器端渲染 - 易于集成路由工具，打包工具以及状态管理工具 - 优秀的支持和社区