React与Vue的相同与不同点

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

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

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

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

React与Vue的不同之处：

1、数据绑定

vue是双向绑定，

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

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

2、状态管理

react

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

Redux三大原则：

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

Redux中3个常用的方法

1、createStore() 创建store

2、combineReducers() 合并多个reducer

3、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

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象

里面的data

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

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

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

性中

Getter

1、getters 可以对State进行计算操作，它就是Store的计算属性

2、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

3、如果一个状态只在一个组件内使用，是可以不用getters

Action

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

Mutation

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

Module

实现模块化

Vuex传递流程：

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

如图所示：

3、路由

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

react

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

Vue

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

4、渲染性能对比

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元素

5、数据更新

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

vue数据更新

通过forceUpdate可以实现数据强制更新

6、开发模式及规模

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。

7、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 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。

8、使用场景

react

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

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

3、期待最大的生态系统

vue

1、期待模板搭建应用

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

3、期待应用尽可能的小和快

9、服务器端渲染（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)至关重要。

10、总结

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

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

正文