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。一旦你选择了版本,它还是很好用的,但学习的过程却非常痛苦。

第三方库

社研通
社研通

文科研究生的学术加速器

下载

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

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

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

代码清晰度

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

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

<div onClick={this.someFunction.bind(this, listItem)} />

有时候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 的统治地位。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
vue.js为什么报错
vue.js为什么报错

vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

129

2024.03.11

vue.js插槽有哪些用
vue.js插槽有哪些用

vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

187

2024.03.11

vue.js怎么带参数跳转
vue.js怎么带参数跳转

vue.js带参数跳转的方法:1、定义路由;2、在组件中使用路由参数;3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

98

2024.03.11

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

448

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

531

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

C++多线程并发控制与线程安全设计实践
C++多线程并发控制与线程安全设计实践

本专题围绕 C++ 在高性能系统开发中的并发控制技术展开,系统讲解多线程编程模型与线程安全设计方法。内容包括互斥锁、读写锁、条件变量、原子操作以及线程池实现机制,同时结合实际案例分析并发竞争、死锁避免与性能优化策略。通过实践讲解,帮助开发者掌握构建稳定高效并发系统的关键技术。

4

2026.03.16

热门下载

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

精品课程

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

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