0

0

react好还是vuejs好

清浅

清浅

发布时间:2019-01-21 13:23:09

|

9580人浏览过

|

来源于php中文网

原创

不论是从大小、性能、简单性还是学习曲线上来看, vuejs是现在最好的选择,它的轻量化和性能可以同时在项目中使用两个框架(如angular和vue)而 react代码难以维护和去修改它

现如今,Vue.js 在 Github 上的流行指数已经超过了 React而且还在不断的增长,由于它并没有像 Facebok或Google那样的大公司支持,但这种增长让人非常惊讶。

接下来在文章中将会分享一些对 Vue 流行的看法,以及为什么它能超过竞争者。以及它俩之间的区别,并说明为什么 React(即使它是个好框架)经常很有欺骗性

react好还是vuejs好

【推荐课程: React教程vue.js教程

立即学习前端免费学习笔记(深入)”;

【推荐文章:vue 与 react 区别有多大

1. Web 开发的发展

在上个世纪九十年代,写网站还只是纯粹的 HTML,加上一些简单的 CSS 样式而已。好处就是非常简单。坏处就是缺少很多功能。之后就出现了 PHP,于是我们很高兴地把代码写成了这个样子

react好还是vuejs好

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

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

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

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

原因如下:

2. 性能

首先来谈一谈性能。

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

我们来看一组数字:

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

Vue 得一分。

实际的性能如下图所示:

react好还是vuejs好

未标题-2.jpg

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

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

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

3. 学习曲线

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

第三方库

Asp+Ajax(Jquery)实用例子
Asp+Ajax(Jquery)实用例子

Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的Jquery加持,开发则变的十分简单和容易。

下载

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

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

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

代码清晰度

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

你还会遇到其他的问题。从组件模板中调用方法经常会造成无法访问this,结果不得不手动绑定:

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

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

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

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

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

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

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

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

4. 结论

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

能使得你可以同时在项目中使用两个框架(如Angular和Vue),因此更容易移植到 Vue。

至于社区和流行度,即使 Vue 现在获得了很多关注,但还很难说它达到了 React 的流行程度。但一个没有大型 IT 公司支持的框架能如此

流行,这个事实本身就值得关注。它的市场占有率已经迅速从一个不为人知的项目成长为一个前端开发中的最大的竞争者。

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

这个框架使得理解、分享和编辑变得容易。不仅阅读他人的代码会变得很容易,修改他人的实现也不难。有了 Vue,我只用了几个月的时

间,就可以自信地处理各个子项目,和外部人员对项目做出的改动。它为我节省了时间,使我能专注于系统设计上。

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

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

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

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

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

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

1797

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1189

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1088

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

948

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1396

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1228

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1439

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1303

2023.11.13

ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

27

2025.12.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号