前端框架技术选型讨论

[variousdidt]

vue 对比 react：

对比 vue2 和 vue3 ，vue3 的组合式 API 无疑是更好的选择，以下优势针对于 vue3 版本而言； react 也仅指使用 create react app 方式构建的项目

• 优势

1. 使用 vite 搭建 vue3 项目框架，自带路由管理，sass ，less 支持的很好，yarn 装一下包即可使用，无需多余配置； react 需要手动配置各种 loader
2. 组合式 API ，逻辑抽离方便，不再受限于生命周期函数； react 也可以做到
3. vite 使用Rollup打包，速度大幅优于 webpack ，开发体验更好； react 大多使用 webpack ，打包速度一般

• 劣势

1. vue 不支持 IE11(reactive 使用的是 Proxy ，IE 全系不支持)，react 进行相关配置后支持 IE9-IE11
2. vue TS 支持不够好； react 天生支持
3. vue2 升级 vue3 有代价，社区相关轮子未必及时适配； react 社区活跃度高，大版本升级更早，适配大概更全

总的来说，react 就是 f(state) = UI ，仅仅是一个 UI 框架，其他的交给开发者自己配置；而 vite 生成的 vue 项目是一个功能更全的脚手架，帮开发者做了很多其他事（比如路由）。

[nikolai]

要比就 Vite 跟 Next ，Vue 跟 React 比，不能这么玩田忌赛马

还有都快 2023 了 ，不要再用 CRA ，Next / Remix 什么的不用服务器渲染的话也就可以当 CRA 用

[233373]

react+1

[variousdidt]

@nikolai vue 官网推荐使用 vite ，react 官网推荐 cra ；确实是后台，无需 ssr ，这点没说。next 用过，确实很快，但是 next 应该和 nuxt 讨论吧

[variousdidt]

@233373 +1 ，我也是一直 react ，但最近维护了 vue2 ，看了 vue3 ，vue3 很好，但我暂时只敢玩玩

[sjhhjx0122]

构建工具就构建工具之间比，既然 react 是库就应该跟 vue 比首页白屏，渲染速度，写法优劣，而且 react vite 起个项目也很快啊，说实话真写大项目我宁愿用 angular 。小项目活动页 svelte ，solidjs 写起来真的比 react vue 强

[Akitora]

here we go again

[heishu]

抛弃 vite 吧，turbopack 构建更快

[wu67]

vite 和 webpack 相比, 也就本地开发的时候快一点吧, 构建的话, 目标一致的时候, 其实时间差不多, 反正我个人感觉是这样的. 题外话, vite 也可以用来调试构建 react......

vue2 升级 vue3 基本上是破坏性更新, 尤其是加入 ts 的话, 基本相当于整块业务的代码重写了, 还有包装取值的.value, 简直让人脑壳疼.

至于框架, nuxt next 我个人觉得都是对应 vue/react 的强约束实践, 你喜欢 /跟你团队风格接近的话, 就会感觉很舒服, 反而则会觉得很难受.

生态方面, vue 官方有给出非常完善的解决方案, 基本开箱即用.
react 的 cra 相当于一个非常基础的‘启动器’, 可能小心翼翼的额外增加部分可选的配置, 并且配置范围也有限, 一些三方的配置轮子大多有一个巨大的问题, 更新周期过长, 甚至有些两三年没更新了.

还有另一个让人难受的点, 就是 react 的各种生态有点分裂, 缺少一个一统江湖的轮子, 或者轮子是有自己的想法.... 例子就是, react-router, 不止 router, 还带着 http req... 另一个是状态库, redux recoil 等等等好几个轮子各方乱战...还有就是 antd, 整体功能都有, 各种小细节上让开发者难受, 就没考虑过 DRY

[xieren58]

solidjs

[variousdidt]

@wu67 很同意

[variousdidt]

@heishu 宣传说比 vite 快 10 倍，被 Evan you 反驳了

[renhou]

自己开发，哪个用的顺手用哪个
公司开发，根据公司技术栈，成员能力决定
特定需求，必须用这个库，必须支持 xxx ，那就以需求为导向
找工作，最好一个很强另一个也不差

vue 和 react 各有各的特征和局限性，关键取决于你要拿它干啥解决啥

[kkkyrieliu]

看团队。以我目前的经验，vue （自动挡）确实会帮助团队更好招人

[FightPig]

vite 用了阵挺好用的，但总有时会有些问题，比如 hmr ，动不动就没用了，比如你自己写个组件，然后做成 npm 包，打包进项目，运行都没问题，也不报错，但 hmr 没用。后来一点点排查发现是 vuedragable 造成的，去掉又好了。

[murmur]

vue2 可以做 IE 兼容，没毛病

[wunonglin]

比来比去，不如直接用 Angular ，全套不用想那么多

[variousdidt]

@murmur vue2 可以，但是 vue3 组合式 API 个人感觉用过就不会愿意用生命周期的方式了

[ccyu220]

天天月经贴没意思

1 、有选型能力，React 的生态什么都能满足
2 、快速出产品，Vue 全家桶，你选型的时候我项目都写完了
3 、Vite 和 CRA ，一般的项目速度没必要分的这么细，况且 Vite 快速上手，为什么不用。
4 、都快 2023 年了，你可以说它的 TS 实现没有 React 那么简洁（例如 Props ），但没必要说 Vue 对 TS 支持不好
5 、Vue 版本都发到 3.2.41 了，还说 vue2 升级 vue3 有代价

这种现成的东西难道不是看自己选择吗，别人说的就能影响你的决策？

比如我，首选肯定是 React ，并且是 next.js 。

但是你做公司的小项目，照顾所有人能力上下，那 Vue 全家桶是不是就是更好的选择？

不管是上面那两个和 Angual 、Solid.js 、Svelte ，还是 Next 、Nuxt ，或者 Vite 、Webpack 、刚公布的 Turbopack

潮流向前，工具永远是适时而用

[wangxiaoaer]

我以前天天黑 ng ，最近把 ng 的最新文档又过了一遍觉得真是香，可惜团队都是 vue 一把梭。

[zhwithsweet]

https://github.com/fisand/vite-wagmi-starter 求个 star

现代 Dapp 前端模版

[gdtdpt]

ng 的香真是懂的都懂，可惜有点门槛变成小众了，单干我选 react ，团队还是 vue 吧，太自由的东西不能指望人人都懂编程规范，交流起来太累。

[walpurgis]

2 也可以用组合式 api 和 vite ，不能作为 3 的优势

[Ritr]

react + vite + ts

[Ritr]

@gdtdpt ng 确实很好

[jones2000]

选型前先给出项目预算，否则就是空谈，没有意义。5000 的单子 和 500W 的单子都做一个聊天工具，选型会一样吗

[YuTengjing]

1. 正经人谁用用 cra ，现在很多人都在用 vite + react 。cra 一直没迁移 vite 怀疑是提前收到消息 webpack 的作者在悄咪咪的搞 turbopack
2. 前端框架就和前端框架比较，cli 就和 cli 比较，cra 要比也是比 vue-cli
3. vue3 的 TS 支持很好
4. 使用 cra 默认已经配置好了很多东西，并不需要改动很多配置，难道 vite 一行配置都不需要了？比配置少，没有框架比得过 parcel
5. 使用路由不就是装一个包几行代码的事吗？

[940701122]

中后台项目有个关键的点是目前 react 没法完美实现 vue 的 keepAlive

[vecZro]

@variousdidt vue2.7 支持 组合式 api 啊

[LiYechao]

@variousdidt vite + react + ts 它不香吗？

[signalas1]

React React React

[YuTengjing]

@ccyu220 vue2 升级 vue3 升级代价是很高的，先不论：
1. 语言 js 到 ts
2. vue3 应该没 mixin 吧，vue2 逻辑复用可大量用，这块是重灾区
3. 一个成熟的大型 vue2 项目依赖十几个其它 vue2 库很合理吧，稍微大点公司都有自研的组件库
4. 代码风格官方推荐 composition api ，把旧的组合式 api 组件迁移到 compoaition api 这也是隐形成本，说是隐形是因为没必要立马去做，甚至可以选择不做

[14]

我最近的选择也是 Vite + React + TS + Vitest

[dayeye2006199]

选型 =

1. 你团队里大部分人会什么？
2. 我们以后招到的人会不会这个，或者很快学会用这个？
3. 我们能不能快速实现我们现在需要的东西？
4. 我们以后能不能快速实现我们可能需要的东西？

你看，这 4 个问题，哪个和技术有关呢？

[MrHyde]

你还是老老实实用 react 吧，简单的很

[DOLLOR]

实在不行就
TS + vanilla + web component

[WasteNya]

@940701122 有的，react activation ，还很灵活

[Aloento]

我还是觉得传统 HTML + CSS + ES5 适合你

[yechentide]

请问楼上大佬们说的 ng 是什么？

[zhennann]

要想多快好省，用一个 CabloyJS 全栈框架就够了，可以做到：
1 、只需一个项目，既可同时实现“后台管理系统”和“前台应用”；
2 、只需一个项目，既可同时跨端 pc 、mobile 。mobile 端是接近原生体验。
下面以“微信一起点菜”为例：
1 ）前台点菜应用： https://test.cabloy.com/?appKey=diancai-h5%3AappDianCaiWechatH5&appIsolate=true
2 ）后台商家管理系统： https://test.cabloy.com/
3 ）以上两个链接可以分别用 pc 和 mobile 打开。全新交互体验，全新架构设计，试过便知。

[SeanWeirdo]

@yechentide angular

[solos]

这时候 angular 的先进性就体现出来了 别的框架再加上些乱七八糟的东西最后也不一定能达到 angular 的水平 angular 在终点站等你们 众所周知 angular + 菜鸟 = react/vue + 老鸟

[Zzzz77]

网友：Angular YYDS
现实：公司让用什么你就用什么

[jy02534655]

@variousdidt vue 2.7 组合式 api 直接可以用，vue 2.6 版本可以用 @vue/composition-api 扩展来用 组合式 api ，我们公司现在就是这样搞的，另外用 vue cli 5.0.8 创建的 vue 2.6 版本项目在 package.json 里面配置好 browserslist 无需其他扩展就可以兼容 ie11

[KouShuiYu]

@variousdidt Vue2.7 以后可以用组合式 API 的，用法上和 Vue3 没啥区别

[beisilu]

我感觉 vue 和 flutter 里的 getx 库很像，屏蔽了很多细节加入很多糖。但是 getx 在 flutter 社区里也是褒贬不一。

[akakidz]

2022 年了技术选型还有人推荐 angular 我是没想到的

[beginor]

angular +1

[arfaWong]

@akakidz 推荐 Angular 有何不妥？你认为的 Angular 不会是 AngularJS 吧？

[Bazingal]

2022 年了还有人看不起 angular 我是没想到的

[wuxqing]

react 14,256,709
vue 3,067,705
@angular/core 2,496,934
看下载量，angular 貌似也不差

[Chad0000]

作为一个在公司和个人项目中使用 angular 好多年的全端开发，不是很了解上面遇到的问题（因为我没遇到过）。

[vHypnos]

自从写了 Vue ，Next+ React 是真的香。

[akakidz]

@arfaWong angular 在国内招人的成本要比 vue 和 react 高的多

[leeum]

没人提 Umi+React ? 搭配 Antd 用起来也算是全家桶了吧

[simo]

接触过的公司包括朋友公司，基本效率第一原则。我选型的话，肯定根据团队经验和能力来定，通用的，比如成熟三方库、自建库都给你提前做好了。
大部分人对框架的使用，在业务开发、复制粘贴层面即可。

[kinge]

Next+ React+Tailwindcss

[ragnaroks]

从维护性、容易难度、生态支持、社区支持来说，只有 react 。

但是考虑到大多数前端并不是系统学习而是批站看一个星期视频赶鸭子上架，所以我在国内还是推荐 vue 。

[danhahaha]

小马过河，别听他们给你说，3 个都上手试下，最多一周时间

[nazhenhuiyi294]

建议从找工作的角度开始思考，现在 next 工作应该是最多的。

[janyin]

vite + react + ts

[FreshOldMan]

vite + react + ts

[variousdidt]

@leeum umi 太重了，首屏加载时间要优化优化

[likunyan]

react 需要手动配置各种 loader?

CRA 就行啊

[likunyan]

我现在是 Vite + React + Recoil + TS

[likunyan]

还有 Next

[anonymous2351d00]

angular + ng-zorro
angular + ng-zorro-mobile
angular + ng-alain

[hez2010]

推荐 solidjs ，类似 react ，但比 react 快，还比 react 小。

[iamv2er]

几年前就看到类似的帖子了

[jamosLi]

一个 cra 我还要查一下是不是啥新技术。
你要是公司用，稳定，安全，可维护是第一要素，是字面上的三要素，不要说我也可以，然后通过一堆骚断腰的操作达到相应目的。其次就是一个稳定，易用，长期维护的 UI 库。更重要的一点是市场上拥有足够多的相关技术人才。

所以这一堆里 angular 第一个被干掉，没那多人会，工作不是炫技。
UI 库到目前来说就两个 antd 和 vant 。

所以很好选 pc react ，移动端 vue ，不出彩，但是不会错。

[Mirachael]

@jamosLi Angular 没什么花里胡哨的东西吧

[luvxy]

一位普通公司的前端组长给个建议吧,看你项目是啥,看你团队怎么样?

普通的后台管理系统, 你们也是一家很普通的公司,都是写业务代码的情况, 那就 vue 上手都容易,做的也快. 模版语法+option api,写法基本固定了一个下限了(vue 官网说了 Composition 解决了啥问题,并不是一定非要用这玩意的,先进的不一定是最合适的),简单易读,接手别人代码速度更快,招人也很好招 薪资也不会那么高,甚至要求不高直接去培训班进货就能干出来项目 ,相关库基本都是官方那套稳定且文档多. 这个选择就是不加班.

react 对人员要求较高,你想要项目稳定易维护,需要研究各种项目规范(我见过的烂代码太多了, 包括大厂员工) ,jsx 灵活自己造轮子很爽,周边很多想咋搭配怎么搭配, 各种玩新玩具,非常容易出现不同人用不同的库,一个项目里面各种各样的写法,加班写坑填坑非常适用, 适合想要跳槽想再项目里面炫技,给简历加亮点的情况. 而且你造出啥轮子,封装复杂功能的话, 让你在公司变得不可替代,啥人接手都会觉得难受

react 和 vue 脚手架根本不需要纠结,越简洁的越好, 项目大了肯定得自己修改,配置甚至自己写 plugin 的

[web1996]

@940701122 使用 swr 缓存请求，使用 store 管理状态，也能实现 vue 的缓存功能，体验还更好。