我为什么要立刻放弃 React 而使用 Vue？

灰太狼 2022-04-11 10:21 322阅读 0赞

![u_1678806359_3349544835_fm_173_app_25_f_JPEG_w_640_h_310_s_44134F30696058054CE131CA030070B2][]

现在，Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长，由于它并没有像 Facebok（React）或 Google（Angular）那样的大公司支持，这种增长让人非常惊讶。

我会在这篇文章里说明我对 Vue 流行的一些看法，以及为什么它能超过竞争者。由于 Vue 的设计哲学和特性与 React 十分相似，我会比较这两者，并说明为什么 React（即使它是个好框架）经常很有欺骗性。

Web 开发的发展

在上个世纪九十年代，写网站还只是纯粹的 HTML，加上一些简单的 CSS 样式而已。好处就是非常简单。坏处就是缺少很多功能。

之后就出现了 PHP，于是我们很高兴地把代码写成了这个样子：

![u_1769632027_1404957202_fm_173_app_25_f_JPEG_w_300_h_228_s_E6A0D74B8AE4976C1CF1D50F000070C1][]

虽然今天看来这段代码十分糟糕，但在当时是很大的进步。这种进步到现在依然没变：选择我们喜欢的新语言、新框架，直到某一天出现更好的竞争对手。

在 React 出现之前我用过 Ember。之后我切换到 React，它把所有东西都看作 Web 组件的方式，它的虚拟 DOM，和高效的渲染都让我耳目一新。虽然并不是一切完美，但从编写代码的方式来看，它是个巨大的进步。

后来我决定切换到 Vue.js，不再使用 React。

React 并非很差，但我发现它太笨拙，难以掌握，而且有些地方的代码看起来完全没有逻辑性。而 Vue 解决这些问题的方法让我感到很轻松。

我来说说原因。

性能

首先来谈一谈性能。

每个 Web 开发者都会面临着带宽的限制，因此网页的大小十分重要。网页越小越好。而现在由于移动浏览器的流行，这个问题比几年前更重要。

我们来看一组数字：

Vue 库的大小为 25.6KB。而要让 React 的架构达到相似的功能，需要 React DOM + React Router + React 和其他插件，总共是 48.8KB。

Vue 得一分。

实际的性能如下图所示：

![u_584370768_636648621_fm_173_app_25_f_JPEG_w_483_h_686_s_0760D81053C7435F8D5122570300C0E6][]

![u_573554892_2581042657_fm_173_app_25_f_JPG_w_285_h_175_s_A118CC330B5C7CC81A40D8430300F0F5][]

可见，这些性能测试显示，Vue 比 React 占用的内存更少，运行速度更快。

Vue 的渲染流水线更快，这在构建复杂应用时非常有用。项目渲染更高效，因此不需要在优化代码上考虑太多，从而把更多精力花在对项目真正有用的功能上。它在移动设备上的性能也很不错，因此不需要采用某种算法使之在手机上能更流畅地渲染。

从 React 换成 Vue.js 时，你不需要在大小和性能方面做出妥协。你能同时拥有两者。

学习曲线

学习 React 还算不错。整个库都围绕 Web 组件构建，这一点很好。React 的核心很好、很稳定，但我一直没弄明白它的高级路由配置。这么多路由库的版本是做什么的？现在的版本是4（+ React-router-dom），但我最终用的还是 v3。一旦你选择了版本，它还是很好用的，但学习的过程却非常痛苦。

第三方库

大多数现代框架都有同样的设计哲学：简单的、功能不太多的核心，然后加上其他的库来增强其功能。如果其他的库都能很容易地、用同一种方式集成，那么构建一个技术栈会非常简单。在我看来，这一步骤的简单、直接是非常重要的。

React和Vue都有一套工具帮你启动项目，并配置好各种工具。在React生态环境中，各种库可能很难精通，因为经常会有几个库试图解决同一个问题。

在这个问题上，React和Vue做得都不错。

代码清晰度

在我看来 React 的代码清晰度很差。JSX 允许在代码中嵌入 HTML 代码，是代码清晰度方面的灾难。

你还会遇到其他的问题。从组件模板中调用方法经常会造成无法访问this，结果不得不手动绑定：<div onClick=\{this.someFunction.bind(this, listItem)\} />。

![7c1ed21b0ef41bd50de6f42b5dda81cb38db3db3.jpg][]

有时候React会变得完全不合逻辑……

考虑到应用中很大可能会用到许多条件判断，JSX的方法就非常糟糕了。写循环的方式更像个笑话。当然你可以换个模板系统，从React栈中去掉JSX，也可以在Vue中使用JSX，但那并不是在学习框架时首先学习的方法，因此这里不做讨论。

另一点是，Vue并不要求你必须使用setState或任何类似的方法。当然你还是要在data方法中定义所有的state属性，但如果你忘了定义，那么控制台中就会显示提示。剩下的会自动内部处理，只需要在组件中修改值即可，跟使用普通的 Javascript 对象一样。

使用 React 会遇到很多错误。就算实际的原理很简单，这些错误也会减慢学习的进度。

至于简洁性，用 Vue 写出的代码要比其他框架写出的代码要小很多。这是 Vue 框架最好的一点。一切都很简单，只需几行简明易懂的代码就可以编写出复杂的功能。而使用其他框架，你需要多写 10%、20% 甚至 50% 的代码。

使用 Vue 也不需要学太多东西。一切都很直观。书写 Vue.js 代码能够以最接近的方式表达思想。

Vue 的这种易用性是个非常好的工具，使得接受 Vue 变得容易，也利于团队沟通。不论是你要改变技术栈的其他部分，还是需要在紧急状况下向团队里增加更多人，或者解释你的产品，Vue 都能节约你的时间，从而节约金钱。

时间估算也很容易，因为实现功能所需的时间不会超过开发者估算的时间，从而导致更少的误解、错误或乐观估计。Vue 需要理解的概念更少，使得与项目经理之间的沟通更容易。

结论

不论是从大小、性能、简单性还是学习曲线上来看，拥抱 Vue.js 绝对是现在最好的选择，能同时解决时间和金钱问题。

它的轻量化和性能使得你可以同时在项目中使用两个框架（如Angular和Vue），因此更容易移植到 Vue。

至于社区和流行度，即使 Vue 现在获得了很多关注，但还很难说它达到了 React 的流行程度。但一个没有大型 IT 公司支持的框架能如此流行，这个事实本身就值得关注。它的市场占有率已经迅速从一个不为人知的项目成长为一个前端开发中的最大的竞争者。

Vue 上的模块数量也在飞速增长，而且就算你找不到你需要的模块，自己写一个也不会花太多时间。

这个框架使得理解、分享和编辑变得容易。不仅阅读他人的代码会变得很容易，修改他人的实现也不难。有了 Vue，我只用了几个月的时间，就可以自信地处理各个子项目，和外部人员对项目做出的改动。它为我节省了时间，使我能专注于系统设计上。

React 从设计上要求使用 setState 等辅助函数，而编程时肯定会有忘记使用的时候。还需要花很大精力去编写模板，编写模板的方式也会让项目变得难以理解和维护。

考虑到在大型项目中使用这些框架，使用 React 时你需要掌握其他库，并教给你的团队怎样使用。还要处理各种相关的问题（甲不喜欢这个库，乙不理解那个库等）。Vue 栈更简单，更适合团队使用。

作为开发者，我感到高兴、自信和自由。作为项目经理，我可以更容易地与团队进行计划和沟通。作为自由职业者，我省下了时间和金钱。

当然还有许多 Vue 没有覆盖到的需求（特别是如果你要构建原生应用的时候）。在那些领域 React 做得很好，但 Evan You 和 Vue 团队已经在着手解决这些问题了。

React 由于它很好的概念和这些概念的实现而流行。但现在看来，它的概念混乱得一团糟。

写 React 代码的时候整天都要应付各种临时对策（参考“代码清晰度”一节），努力写出有意义的代码，最后得到的只能是一团谁也看不明白的解决方案。就连你自己，过几个月之后这个解决方案也很难再读懂。你为了发布项目而不得不做出辛苦的努力，而得到的只是一个难以维护、充满错误的东西，连修改它都要经过一番培训才行。

这些负面因素是任何人都不希望在项目中看到的。为什么还要应付这些麻烦呢？就为了社区和第三方库？为了获得一小部分好处，我们要承受太多痛苦，而就连这一小部分好处，也越来越变得不重要。

React 曾经让我的生活更容易，但在某些方面又让实现变得更复杂。多年以后，Vue 终于让我得到了解脱。它的实现与我想像中的开发很相近，而且在开发过程中，除了需要实现的东西之外，基本上不需要考虑任何其他东西。它看上去很像原生的 JavaScript 逻辑（没有setState，也没有用来实现条件结构的特殊用法，也没有各种算法那）。只需要按你想像的方式写代码就行。它速度很快，很安全，而且能让你高兴。我很高兴看到 Vue 越来越多被前端开发者和公司接受，我希望它能结束 React 的统治地位。

免责声明：这篇文章是我的个人观点，仅表达我现在的观点。随着技术的进步，这些观点会发生变化（可能会变好或变坏）。

[u_1678806359_3349544835_fm_173_app_25_f_JPEG_w_640_h_310_s_44134F30696058054CE131CA030070B2]: /images/20220411/46d8139d2faa4488918b5d4d12d89f39.png
[u_1769632027_1404957202_fm_173_app_25_f_JPEG_w_300_h_228_s_E6A0D74B8AE4976C1CF1D50F000070C1]: /images/20220411/372a4877d16f47bf8411ffbb9ca93213.png
[u_584370768_636648621_fm_173_app_25_f_JPEG_w_483_h_686_s_0760D81053C7435F8D5122570300C0E6]: /images/20220411/91bd0efca59b4ba78acc3512139cb142.png
[u_573554892_2581042657_fm_173_app_25_f_JPG_w_285_h_175_s_A118CC330B5C7CC81A40D8430300F0F5]: /images/20220411/973934c5b5ae4d77a2e249e287421596.png
[7c1ed21b0ef41bd50de6f42b5dda81cb38db3db3.jpg]: /images/20220411/c591bc7a42334f48a61edcf177a300a1.png