本篇文章主要是对 React 和 Vue 进行对比，让读者能够对它们有初步的了解

React 和 Vue

React 是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库，可用于创建 Web 用户交互界面。它引入了一种新的方式来处理浏览器 DOM。你只需要声明地定义各个时间点的用户界面，而不用关心在数据变化时，需要更新哪一部分 DOM。在任何时间点，React都能以最小的 DOM 修改来更新整个应用程序。

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

对比 React 和 Vue

相似之处:

React 与 Vue 有许多相似之处：

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

两者之间有相似注册，同时也有不同之处，我们无法直接指出哪一个更好，只能够通过比较来让使用者对它们有更多的了解，从而选择更适合使用的那一个。

不同之处:

核心方面

React 是状态映射到 html，以 javascript 为核心。

Vue 是先有 html 模版然后绑定到 Vue 的 javascript 对象上，是以 html为核心。

对数据的观测上

Vue 有 watch 可以监视一个数据，同时可以用计算属性去使其他数据随之更新。而 React 没有这些。

 

对状态变化的观测上

React 可以随时添加 state 成员，从而灵活的切换状态，但是只能检测本组件的状态变化。

Vue 在定义时就要准备顶级成员，而非顶级成员要通过 api 设置才能变成响应式的，不过 getter 和 setter 让它能够跟踪任何属性值的状态。

在运行时的性能方面

首先，在优化方面，在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。

HTML&CSS方面

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。

Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。任何合乎规范的 HTML 都是合法的 Vue 模板，这自然也有它的优势。

模板 vs JSX

Vue 鼓励你去使用 HTML 模板去进行渲染，使用相似于 Angular 风格的方法去输出动态的内容。因此，通过把原有的模板整合成新的 Vue 模板，Vue 很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。

另一方面，React 推荐你所有的模板通用 JavaScript 的语法扩展——JSX 书写。JSX 使用 JavaScript 而不是模板来开发，赋予了开发者许多编程能力。JSX 是指 JavaScript 混合着 XML 语法，一旦你掌握了它，它使用起来会让你感到畅快。

状态管理 vs 对象属性

如果你对React熟悉，你就会知道应用中的状态是（React）关键的概念。也有一些配套框架被设计为管理一个大的 state 对象，如 Redux。此外，state 对象在 React 应用中是不可变的，意味着它不能被直接改变（这也许不一定正确）。在 React 中你需要使用 setState() 方法去更新状态。

在 Vue 中，state 对象并不是必须的，数据由 data 属性在 Vue 对象中进行管理。data 参数就是应用中数据的保存者。

对于管理大型应用中的状态这一话题而言，Vue.js 的作者尤雨溪曾说过，（Vue 的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。多数情况下，框架内置的状态管理是不足以支撑大型应用的，Redux或 Vuex 等状态管理方案是必须使用的。

 

React 与 Vue 之间的区别还有很多，我们不能一一列举出来，然而，我们可以发现 Vue 的优势在于：

  • 模板和渲染函数的弹性选择
  • 简单的语法和项目配置
  • 更快的渲染速度和更小的体积

而 React 的优势在于：

  • 更适合大型应用和更好的可测试性
  • Web 端和移动端原生 APP 通吃
  • 更大的生态系统，更多的支持和好用的工具

React 和 Vue 都是很优秀的框架，它们之间的相似之处多过不同之处，并且大部分的优秀功能是相通的：

  • 用虚拟 DOM 实现快速渲染
  • 轻量级
  • 响应式组件
  • 服务端渲染
  • 集成路由工具，打包工具，状态管理工具的难度低

所以，React 与 Vue 之间并不能明显的分出高下，这取决与使用者。使用者可以根据以上的建议进行选择，但如果你使用其中一个已经用得很好了，那么，请不要再改变。