vue和react哪个性能更高

Posted 2023-04-08

React和 Vue 以及是经常上 PK 台被进行比较的前端框架，我这边从以下几个方面对两者做一个比较，如果其中有理解不当的大家也可以随时纠正。

学习曲线

React陡峭的学习曲线是一直被诟病的一点。Vue 标榜的是一个渐进式的javascript框架，大部分开发者普遍会认为Vue 的学习曲线低于React，并且相较于React有更丰富的中文支持（主要是VUE开发者是中国人，导致了很多我国的程序员会关注此框架）。但是，随着学习内容的深入，当需要开发复杂的 Web 应用程序时，花哨灵活的指令和逻辑反而会让人觉得 Vue 比 React 更难掌控。简单来说，React是一个陡坡比较难上手，Vue是一个缓坡很容易上手，但是最终的高度两者差不多。

技术社区

React 是近十年的开源项目，因此它拥有成熟的技术社区支持。Vue尽管这几年势头很猛，但是要想建立一套完善的生态系统还需要一些时间来打磨。

灵活性

这也是争议最大的地方。React 专注于 UI，所以在构建 UI 组件时可以从它那里获得很好的支持。Vue 作为一个渐进式框架，只允许使用最基本的功能来构建应用程序，但同时也提供了一些开箱即用的东西：如，用于状态管理的 Vuex、用于应用程序 URL 管理的 Vue Router、Vue 服务器端渲染。

Vue 剥离了许多元素，相比之下 React 更加全面。但如果您正在寻找一种精简、新颖、简单易学、样板代码少、高性能、灵活且完整的前端框架，Vue 更加适合；当然，如果您打算使用低版本 jQuery 代码，Vue 也同样支持。

React 的灵活性则更多依赖于其背后强大的技术社区，在 Facebook 的强力支撑下（ Facebook 的 React 团队包括了 10 名专职开发人员），提供了更多工具、UI 库和教程。

综上所述，我个人觉得在没有实际应用场景的情况下，很难比较出孰优孰劣，没有最好的框架，只有最适合的框架。如果是短期小项目，建议使用 Vue 可以快速敏捷开发（上手快，控件占用小，性能较好）。如果是移动端跨平台的应用推荐 React（ React Native 已经比较成熟而 Vue 的 Weex 仍在不断发展）。

参考技术A 打算新开一个个人项目，在 React 和 Vue 之间摇摆。
我之前用过的技术包括 Backbone/Angular/React ， Vue 只是大概扫下眼文档。
Backbone
手工同步数据和页面真得好烦。
Angular 1.x
很久之前用过快忘记是什么体验了，只记得有点重，组件化开发很弱。 Angular 2 看了眼介绍不是我的菜且体积巨大。
React
用 React + Redux + ES 6 搞过一个项目，数据井井有条，架构比较清楚，配套也好（自动刷新不丢页面状态），只是有点繁琐。 Virtual DOM 的存在使得和真实 DOM 隔了一层有时很不方便，函数式的架构使得组件之间的通信也难处理。
Vue.js
Vue.js 一眼看上去是实用风格，这框架我在用 React 之前就注意到了，只是当时一看是个国人作品就无视了，想不到突然就火起来了。 它比 React+Redux 轻量，内建组件间通信机制，支持组件，配套也不错该有的都有，看上去挺不错的样子，只是是个人项目，不过作者很勤奋所以这可能不是问题。且看作者的一些文字发现作者视野开阔不太会把 Vue 带沟里去偏离前端大势。

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

参考技术A 减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

v-if 有更高的切换开销。 v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

Vue 2.6 加了新的插槽写法: v-slot 。如下:

了解更多插槽新写法的内容，见 Vue 2.6 发布了 。